From 5d7651612b12efc1ef973442e6542f180e29eb09 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 3 Aug 2026 18:23:36 +0300
Subject: [PATCH] web/components/repo: proper StarButton and fork button
 styling on mobile and small viewports

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/RepoHeader.svelte | 15 ++++++++++-----
 web/src/lib/components/repo/StarButton.svelte |  6 +++---
 web/src/lib/components/ui/ButtonGroup.svelte  |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index a642ac5c..4b56f499 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -48,13 +48,14 @@
 			</Button>
 		{/if}
 
-		<ButtonGroup>
+		<ButtonGroup class="flex-1">
 			<Button
 				href={resolve(`${base}/fork` as "/")}
 				variant="default"
 				size="sm"
 				insetShadow={true}
 				icon={GitFork}
+				class="flex-1"
 			>
 				Fork
 			</Button>
@@ -86,7 +87,9 @@
 			</div>
 
 			{#if repo.source}
-				<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted">
+				<div
+					class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
+				>
 					<GitFork class="size-3 shrink-0" aria-hidden="true" />
 					<span>forked from</span>
 					<a
@@ -99,10 +102,12 @@
 			{/if}
 		</div>
 
-		{@render repoActions("flex shrink-0 items-start gap-2 hidden sm:flex")}
+		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
 	</div>
 
-	<div class="flex flex-wrap items-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted">
+	<div
+		class="flex flex-wrap items-center justify gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
+	>
 		{#if repo.description}
 			<span>{repo.description}</span>
 		{:else}
@@ -127,5 +132,5 @@
 		{/if}
 	</div>
 
-	{@render repoActions("mt-2 grid grid-cols-2 items-center gap-2 sm:hidden")}
+	{@render repoActions("mt-2 flex flex-wrap items-start justify-end gap-2 sm:hidden")}
 </section>
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index ee45b571..e23c67e1 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -65,16 +65,16 @@
 </script>
 
 {#if signedIn && repoDid}
-	<div class="flex flex-col items-end">
-		<ButtonGroup>
+	<div class="flex flex-col flex-1 items-start">
+		<ButtonGroup class="w-full">
 			<Button
 				variant="default"
 				size="sm"
 				{insetShadow}
-				class="flex-1"
 				loading={relation.loading}
 				disabled={!relation.known}
 				onclick={toggle}
+				class="flex-1"
 			>
 				<Star
 					class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 4fd0a743..50bd88ea 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -44,11 +44,11 @@
 		children: Snippet;
 	}
 
-	let { spaced = false, class: className, children }: Props = $props();
+	let { spaced = false, class: className, children, ...rest }: Props = $props();
 
 	const classes = $derived(buttonGroup({ spaced, class: className }));
 </script>
 
-<div class={classes}>
+<div class={classes} {...rest}>
 	{@render children()}
 </div>
-- 
2.51.2