From c82b766537f27bd7424fccac0ef46721d31910f7 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Sat, 24 Oct 2026 18:51:30 +0100
Subject: [PATCH] web/repo: truncate long branch and tag names

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/BlobHeader.svelte          | 10 ++++++----
 web/src/lib/components/repo/CommitList.svelte          |  4 +++-
 web/src/lib/components/repo/CommitRow.svelte           |  7 +++++--
 web/src/lib/components/repo/RefChip.svelte             |  7 ++++---
 web/src/lib/components/repo/TreeHeader.svelte          |  6 ++++--
 .../repo/pipelines/PipelineCardContent.svelte          |  7 ++++---
 .../lib/components/repo/tickets/TicketInfoBar.svelte   |  7 ++++---
 web/src/lib/components/search/CodeResultCard.svelte    |  5 +++--
 8 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 3a5bc8a10..004eac18e 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -81,7 +81,7 @@
 </script>
 
 <div
-	class="mb-xs flex flex-col gap-sm typography-paragraph-regular md:mb-md md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:gap-md"
+	class="mb-xs flex flex-col gap-sm typography-paragraph-regular md:mb-md md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,auto)] md:items-center md:gap-md"
 >
 	<div
 		class="flex min-w-0 flex-wrap items-center justify-between gap-x-sm gap-y-xs md:flex-nowrap md:justify-start"
@@ -118,14 +118,16 @@
 		</div>
 	</div>
 
-	<div class="flex flex-col gap-md whitespace-nowrap md:flex-row md:items-center md:gap-xs">
+	<div
+		class="flex min-w-0 flex-col gap-md whitespace-nowrap md:flex-row md:items-center md:gap-xs"
+	>
 		{#if repo || (language && languageColor)}
 			<div
-				class="flex items-center gap-md max-md:justify-between md:flex-row-reverse md:px-xs"
+				class="flex min-w-0 items-center gap-md max-md:justify-between md:flex-row-reverse md:px-xs"
 			>
 				{#if language && languageColor}
 					<div
-						class="flex w-fit items-center gap-xs px-2xs typography-paragraph-small md:px-none"
+						class="flex w-fit shrink-0 items-center gap-xs px-2xs typography-paragraph-small md:px-none"
 					>
 						<ColorBall color={languageColor} />
 						{language}
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index f5ba11541..7a1e2d6af 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -94,7 +94,9 @@
 				{#if (tagsByCommit[commit.hash] ?? []).length > 0}
 					<Separator variant="dot" />
 					{#each tagsByCommit[commit.hash] as name (name)}
-						<Tag color="gray" class="typography-monospace-regular">{name}</Tag>
+						<Tag color="gray" class="typography-monospace-regular" truncate title={name}
+							>{name}</Tag
+						>
 					{/each}
 				{/if}
 				{#if pipelineStatuses}
diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
index 518530214..27ac5a471 100644
--- a/web/src/lib/components/repo/CommitRow.svelte
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -121,8 +121,11 @@
 		{#if tagsByCommit}
 			<Pending>
 				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
-					<Tag color="gray" class="shrink-0 typography-monospace-regular font-normal"
-						>{name}</Tag
+					<Tag
+						color="gray"
+						class="max-w-40 shrink-0 typography-monospace-regular font-normal"
+						truncate
+						title={name}>{name}</Tag
 					>
 				{/each}
 			</Pending>
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
index b0ca121a6..21e003c2a 100644
--- a/web/src/lib/components/repo/RefChip.svelte
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -2,7 +2,7 @@
 	import { tv } from "tailwind-variants";
 
 	export const refChip = tv({
-		base: "flex w-fit items-center justify-center gap-2xs whitespace-nowrap"
+		base: "flex w-fit max-w-full min-w-0 items-center justify-center gap-2xs whitespace-nowrap"
 	});
 </script>
 
@@ -28,10 +28,11 @@
 </script>
 
 <div class={refChip({ class: className })}>
-	<span class="text-foreground-muted">at{isCommit ? " commit" : ""}</span>
+	<span class="shrink-0 text-foreground-muted">at{isCommit ? " commit" : ""}</span>
 	<a
 		href={treeHref}
 		aria-label="Browse {description}"
-		class="text-foreground-default no-underline hover:underline">{label}</a
+		title={ref}
+		class="min-w-0 truncate text-foreground-default no-underline hover:underline">{label}</a
 	>
 </div>
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index 6356f652f..e43d137c9 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -25,7 +25,9 @@
 	<div class="flex min-w-0 items-center gap-sm">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
-		<div class="flex items-center gap-xs typography-paragraph-small text-foreground-muted">
+		<div
+			class="flex shrink-0 items-center gap-xs typography-paragraph-small whitespace-nowrap text-foreground-muted"
+		>
 			{#if folders > 0}
 				<span>{folders} {plural(folders, "folder", "folders")}</span>
 			{/if}
@@ -38,5 +40,5 @@
 		</div>
 	</div>
 
-	<RefChip {ownerHandle} {repoName} {ref} class="hidden md:flex" />
+	<RefChip {ownerHandle} {repoName} {ref} class="hidden max-w-64 md:flex" />
 </div>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 231f9e9fe..3d45c23d6 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -3,12 +3,13 @@
 
 	export const pipelineCardContent = tv({
 		slots: {
-			header: "flex items-start justify-between gap-sm pb-xs md:pb-none",
+			header: "flex min-w-0 items-start justify-between gap-sm pb-xs md:pb-none",
 			trigger: "flex min-w-0 flex-wrap items-center gap-x-xs gap-y-2xs",
-			triggerRow: "flex flex-wrap items-center gap-x-1.5 gap-y-2xs text-foreground-default",
+			triggerRow:
+				"flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-2xs text-foreground-default",
 			triggerIcon: "size-3.5 shrink-0 text-foreground-muted",
 			triggerVerb: "text-foreground-muted",
-			triggerRef: "font-semibold",
+			triggerRef: "min-w-0 font-semibold wrap-anywhere",
 			triggerArrow: "size-3.5 shrink-0 text-foreground-muted",
 			sha: "shrink-0 self-center rounded-md bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline",
 			meta: "flex flex-wrap items-center justify-between text-foreground-muted",
diff --git a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
index 3880f98e8..81a4b239b 100644
--- a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
@@ -63,11 +63,12 @@
 
 {#snippet branch(name: string)}
 	{#if targetBranchHref}
-		<Link href={targetBranchHref} variant="inherit"
-			><Tag data-testid="targetBranchTag" data-branch={name}>{name}</Tag></Link
+		<Link href={targetBranchHref} variant="inherit" class="max-w-full min-w-0"
+			><Tag data-testid="targetBranchTag" data-branch={name} truncate title={name}>{name}</Tag
+			></Link
 		>
 	{:else}
-		<Tag data-testid="targetBranchTag" data-branch={name}>{name}</Tag>
+		<Tag data-testid="targetBranchTag" data-branch={name} truncate title={name}>{name}</Tag>
 	{/if}
 {/snippet}
 
diff --git a/web/src/lib/components/search/CodeResultCard.svelte b/web/src/lib/components/search/CodeResultCard.svelte
index 14340845d..584373038 100644
--- a/web/src/lib/components/search/CodeResultCard.svelte
+++ b/web/src/lib/components/search/CodeResultCard.svelte
@@ -26,10 +26,11 @@
 			>{result.repo.owner.handle}/{result.repo.slug}</a
 		>
 		</div>
-		<div class="flex gap-2xs">
+		<div class="flex min-w-0 flex-wrap gap-2xs">
 			{#each branches as branch (branch)}
 				<span
-					class="shrink-0 rounded-md bg-background-canvas px-xs py-2xs typography-paragraph-small text-foreground-muted"
+					title={branch}
+					class="max-w-48 truncate rounded-md bg-background-canvas px-xs py-2xs typography-paragraph-small text-foreground-muted"
 					>{branch}</span
 				>
 			{/each}
-- 
2.54.0