From d8aff6f4db9bcb7810f7f0761fc4b25dc0eac1dd Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 13 Oct 2026 00:35:51 +0200
Subject: [PATCH] web/components: render one commit row tree per breakpoint

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/CommitRow.svelte | 113 +++++++------------
 1 file changed, 38 insertions(+), 75 deletions(-)

diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
index da84896df..ee4a45d76 100644
--- a/web/src/lib/components/repo/CommitRow.svelte
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -18,33 +18,8 @@
 	import type { CommitSummary } from "$lib/components/repo/types";
 	import { tv } from "tailwind-variants";
 
-	const subjectLayout = tv({
-		slots: {
-			wrapper: "min-w-0",
-			link: "text-foreground-default no-underline hover:underline",
-			signOff: "",
-			bodyToggle: ""
-		},
-		variants: {
-			wrap: {
-				true: {
-					wrapper: "space-x-xs",
-					link: "wrap-break-word",
-					signOff: "align-middle",
-					bodyToggle: "inline-flex align-middle"
-				},
-				false: {
-					wrapper: "flex items-center gap-xs",
-					link: "truncate",
-					signOff: "",
-					bodyToggle: ""
-				}
-			}
-		}
-	});
-
 	const row = tv({
-		base: "px-md md:col-span-full md:grid md:grid-cols-subgrid md:grid-rows-[minmax(3rem,auto)] md:items-center"
+		base: "grid grid-cols-[minmax(0,max-content)_max-content_max-content_1fr] items-center gap-1 p-4 max-md:text-foreground-muted md:col-span-full md:grid-cols-subgrid md:grid-rows-[minmax(3rem,auto)] md:gap-x-[normal] md:gap-y-0 md:py-0"
 	});
 
 	interface Props {
@@ -75,8 +50,8 @@
 	const hasBody = $derived(hasBodyBeyondSignOffs(commit.body));
 </script>
 
-{#snippet author()}
-	<span class="flex min-w-0 items-center gap-2xs">
+{#snippet author(extra = "")}
+	<span class="flex min-w-0 items-center gap-2xs {extra}">
 		{#if commit.authorHandle}
 			<User did={commit.authorDid} handle={commit.authorHandle} class="min-w-0" link />
 		{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
@@ -124,20 +99,23 @@
 	</span>
 {/snippet}
 
-{#snippet subject(wrap = false)}
-	{@const s = subjectLayout({ wrap })}
-	<span class={s.wrapper()}>
-		<a href={commitHref} class={s.link()} title={commit.subject}>
+{#snippet subject()}
+	<span class="min-w-0 space-x-xs md:flex md:items-center md:gap-xs md:space-x-0">
+		<a
+			href={commitHref}
+			class="wrap-break-word text-foreground-default no-underline hover:underline md:truncate"
+			title={commit.subject}
+		>
 			{commit.subject}
 		</a>
 		{#if signOffs.length > 0}
-			<CommitSignOff {signOffs} class={s.signOff()} />
+			<CommitSignOff {signOffs} class="align-middle" />
 		{/if}
 		{#if hasBody}
 			<CommitBodyToggle
 				{expanded}
 				onclick={() => (expanded = !expanded)}
-				class={s.bodyToggle()}
+				class="inline-flex align-middle md:inline-block"
 			/>
 		{/if}
 		{#if tagsByCommit}
@@ -149,9 +127,7 @@
 				{/each}
 			</Pending>
 		{/if}
-		{#if wrap}
-			{@render pipeline("min-h-0 inline-flex align-middle", "small")}
-		{/if}
+		{@render pipeline("min-h-0 inline-flex align-middle md:hidden", "small")}
 	</span>
 {/snippet}
 
@@ -177,18 +153,11 @@
 	</MoreMenu>
 {/snippet}
 
-{#snippet body(extra = "")}
-	{#if hasBody && expanded}
-		<p
-			class="pb-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted {extra}"
-		>
-			{commit.body}
-		</p>
-	{/if}
-{/snippet}
-
 {#snippet when()}
-	<TimeAgo value={commit.when} class="shrink-0 whitespace-nowrap text-foreground-muted" />
+	<TimeAgo
+		value={commit.when}
+		class="order-5 shrink-0 whitespace-nowrap text-foreground-muted md:order-0"
+	/>
 {/snippet}
 
 <!--
@@ -196,33 +165,27 @@
 	keep a comfortable height and an expanded body drops underneath them.
 -->
 <div class={row({ class: className })}>
-	<div class="hidden md:contents">
-		{@render author()}
-		<span class="flex flex-row items-center gap-xs">
-			{@render actions()}
-			{@render sha()}
-		</span>
+	{@render author("order-3 md:order-none md:col-start-1 md:row-start-1")}
+	<span class="hidden items-center gap-xs md:col-start-2 md:row-start-1 md:flex">
+		{@render actions()}
+		{@render sha()}
+	</span>
+	<div class="order-1 col-span-full flex min-w-0 items-start md:order-0 md:contents">
 		{@render subject()}
-		<span class="flex flex-row items-center gap-xs justify-self-end">
-			{@render pipeline()}
-			{@render when()}
-		</span>
-	</div>
-
-	<div class="flex flex-col gap-2xs py-md text-foreground-muted md:hidden">
-		<div class="flex min-w-0 items-start">
-			{@render subject(true)}
-			<span class="ml-auto shrink-0">{@render mobileMenu()}</span>
-		</div>
-		{@render body()}
-		<div class="flex min-w-0 items-center gap-2xs">
-			{@render author()}
-			<span class="shrink-0">committed</span>
-			{@render when()}
-		</div>
-	</div>
-
-	<div class="hidden md:contents">
-		{@render body("md:col-start-3")}
+		<span class="ml-auto shrink-0 md:hidden">{@render mobileMenu()}</span>
 	</div>
+	<span class="order-4 shrink-0 md:hidden">committed</span>
+	<span
+		class="contents items-center gap-xs md:col-start-4 md:row-start-1 md:flex md:justify-self-end"
+	>
+		{@render pipeline("max-md:hidden")}
+		{@render when()}
+	</span>
+	{#if hasBody && expanded}
+		<p
+			class="order-2 col-span-full pb-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted md:order-0 md:col-span-1 md:col-start-3 md:row-start-2"
+		>
+			{commit.body}
+		</p>
+	{/if}
 </div>
-- 
2.54.0