From 46c5dffdb1c7f7e4b62de4e6ecc7531ac0bb5275 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 9 Sep 2026 18:33:50 +0100
Subject: [PATCH] web/repo: rework the commit row for mobile

more gh like

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/CommitRow.svelte | 86 ++++++++++++--------
 1 file changed, 53 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
index 2a670b596..017951ebd 100644
--- a/web/src/lib/components/repo/CommitRow.svelte
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
-	import Ellipsis from "$icon/ellipsis";
+	import Copy from "$icon/copy";
 	import FolderCode from "$icon/folder-code";
-	import Button from "$lib/components/ui/Button.svelte";
+	import CommitBodyToggle from "$lib/components/repo/CommitBodyToggle.svelte";
+	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
 	import CopyButton from "$lib/components/ui/CopyButton.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import MoreMenu from "$lib/components/ui/MoreMenu.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
@@ -86,21 +89,22 @@
 	</span>
 {/snippet}
 
-{#snippet subject()}
-	<span class="flex min-w-0 items-center gap-2">
-		<a href={commitHref} class="truncate text-foreground-default no-underline hover:underline">
+{#snippet subject(wrap = false)}
+	<span class={wrap ? "min-w-0 space-x-2" : "flex min-w-0 items-center gap-2"}>
+		<a
+			href={commitHref}
+			class="{wrap
+				? 'wrap-break-word'
+				: 'truncate'} text-foreground-default no-underline hover:underline"
+		>
 			{commit.subject}
 		</a>
 		{#if commit.body}
-			<button
-				type="button"
-				class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
-				aria-expanded={expanded}
-				aria-label="Toggle commit body"
+			<CommitBodyToggle
+				{expanded}
 				onclick={() => (expanded = !expanded)}
-			>
-				<Ellipsis class="size-3" aria-hidden="true" />
-			</button>
+				class={wrap ? "inline-flex align-middle" : ""}
+			/>
 		{/if}
 		{#if tagsByCommit}
 			<Pending>
@@ -109,22 +113,44 @@
 				{/each}
 			</Pending>
 		{/if}
+		{#if wrap}
+			{@render pipeline("min-h-0 inline-flex align-middle", "small")}
+		{/if}
 	</span>
 {/snippet}
 
-{#snippet pipeline()}
+{#snippet pipeline(extra = "", size: ButtonVariants["size"] = "regular")}
 	{#if pipelineStatuses}
-		<span class="flex min-h-9 items-center">
+		<span class="flex min-h-9 items-center {extra}">
 			<Pending>
 				{@const status = (await pipelineStatuses)[commit.hash]}
 				{#if status}
-					<PipelineWorkflows {ownerHandle} {repoName} pipeline={status} />
+					<PipelineWorkflows {ownerHandle} {repoName} pipeline={status} {size} />
 				{/if}
 			</Pending>
 		</span>
 	{/if}
 {/snippet}
 
+{#snippet mobileMenu()}
+	<MoreMenu label="More actions for commit {commit.shortHash}" size="small">
+		<DropdownItem icon={Copy} onclick={() => navigator.clipboard.writeText(commit.hash)}>
+			Copy SHA
+		</DropdownItem>
+		<DropdownItem icon={FolderCode} href={treeHref}>Browse repository</DropdownItem>
+	</MoreMenu>
+{/snippet}
+
+{#snippet body(extra = "")}
+	{#if commit.body && expanded}
+		<p
+			class="pb-2 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" />
 {/snippet}
@@ -149,26 +175,20 @@
 		</span>
 	</div>
 
-	<div class="flex flex-col gap-2 py-4 text-foreground-muted md:hidden">
-		{@render subject()}
-		<div class="flex items-center justify-between gap-2">
-			{@render author()}
-			<span class="flex flex-row items-center gap-2">
-				{@render pipeline()}
-				{@render actions()}
-			</span>
+	<div class="flex flex-col gap-1 py-4 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>
-		<div class="flex items-center justify-between gap-2">
-			{@render sha()}
+		{@render body()}
+		<div class="flex min-w-0 items-center gap-1">
+			{@render author()}
+			<span class="shrink-0">committed</span>
 			{@render when()}
 		</div>
 	</div>
 
-	{#if commit.body && expanded}
-		<p
-			class="pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted md:col-span-full"
-		>
-			{commit.body}
-		</p>
-	{/if}
+	<div class="hidden md:contents">
+		{@render body("md:col-start-3")}
+	</div>
 </div>
-- 
2.51.2