From b803ff18adb969e2d481bceceb1cb3fc45511241 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 1 Sep 2026 18:02:59 +0200
Subject: [PATCH] web/repo: make BlobHeader wrap into three rows below md

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/BlobHeader.stories.svelte |   8 +-
 web/src/lib/components/repo/BlobHeader.svelte | 153 ++++++++++--------
 2 files changed, 88 insertions(+), 73 deletions(-)

diff --git a/web/src/lib/components/repo/BlobHeader.stories.svelte b/web/src/lib/components/repo/BlobHeader.stories.svelte
index 15279279f..978061ce4 100644
--- a/web/src/lib/components/repo/BlobHeader.stories.svelte
+++ b/web/src/lib/components/repo/BlobHeader.stories.svelte
@@ -22,7 +22,7 @@
 	};
 
 	const linksToRaw = async ({ canvas }: PlayContext) => {
-		const raw = canvas.getByRole("link", { name: "Raw" });
+		const raw = canvas.getByRole("link", { name: "Open raw file" });
 		await expect(raw).toHaveAttribute(
 			"href",
 			"/dawn/tangled/raw/main/web/src/lib/components/repo/BlobView.svelte"
@@ -36,8 +36,8 @@
 	};
 
 	const flipsView = async ({ canvas, userEvent }: PlayContext) => {
-		const source = canvas.getByRole("button", { name: "Source" });
-		const preview = canvas.getByRole("button", { name: "Preview" });
+		const source = canvas.getByRole("button", { name: "View source" });
+		const preview = canvas.getByRole("button", { name: "View rendered" });
 		await expect(preview).toHaveAttribute("aria-pressed", "true");
 		await userEvent.click(source);
 		await expect(source).toHaveAttribute("aria-pressed", "true");
@@ -100,6 +100,6 @@
 	play={async ({ canvas }: PlayContext) => {
 		await expect(canvas.getByText("spindle")).toBeVisible();
 		await expect(canvas.queryByRole("link", { name: "Download" })).toBeNull();
-		await expect(canvas.queryByRole("link", { name: "Raw" })).toBeNull();
+		await expect(canvas.queryByRole("link", { name: "Open raw file" })).toBeNull();
 	}}
 />
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 7d31dc664..9fe0a4b3d 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -10,6 +10,7 @@
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import CopyButton from "$lib/components/ui/CopyButton.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
 	import RefChip from "./RefChip.svelte";
 	import RepoCrumbs from "./RepoCrumbs.svelte";
@@ -57,16 +58,20 @@
 	);
 </script>
 
-<div class="mb-2 flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular">
-	<div class="flex min-w-0 items-center gap-3">
+<div
+	class="mb-2 flex flex-col gap-3 typography-paragraph-regular md:mb-4 md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:gap-4"
+>
+	<div class="flex min-w-0 items-center justify-between gap-3 md:justify-start">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
-		<div class="flex items-center gap-2 text-foreground-muted">
+		<div
+			class="flex shrink-0 items-center gap-2 typography-paragraph-small text-foreground-muted"
+		>
 			{#if sizeLabel}
 				<span>{sizeLabel}</span>
 			{/if}
 			{#if sizeLabel && showLines}
-				<span class="select-none" aria-hidden="true">&middot;</span>
+				<Separator variant="dot" />
 			{/if}
 			{#if showLines}
 				<span>{lines} {lines === 1 ? "line" : "lines"}</span>
@@ -74,77 +79,87 @@
 		</div>
 	</div>
 
-	<div class="flex flex-wrap items-center gap-2 whitespace-nowrap max-md:order-3 max-md:w-full">
-		{#if showWrapToggle}
-			<Checkbox bind:checked={wrap} class="px-2 text-foreground-muted">Wrap</Checkbox>
-		{/if}
-		<RefChip {ownerHandle} {repoName} {ref} />
-		{#if language && languageColor}
-			<div
-				class="flex w-fit items-center gap-2 rounded-sm border border-background-canvas bg-background-canvas px-2 py-1 whitespace-nowrap"
-			>
-				<ColorBall color={languageColor} />
-				{language}
-			</div>
-		{/if}
+	<div class="flex flex-col gap-4 whitespace-nowrap md:flex-row md:items-center md:gap-2">
+		<div class="flex items-center gap-4 max-md:justify-between md:flex-row-reverse md:px-2">
+			{#if language && languageColor}
+				<div class="flex w-fit items-center px-1 md:px-0 gap-2 typography-paragraph-small">
+					<ColorBall color={languageColor} />
+					{language}
+				</div>
+			{/if}
+			<RefChip
+				{ownerHandle}
+				{repoName}
+				{ref}
+				class="typography-paragraph-small max-md:ms-auto"
+			/>
+		</div>
+
 		{#if kind !== "submodule"}
-			{#if hasRenderedView(kind)}
-				<ButtonGroup>
+			<div class="flex items-center gap-2 max-md:justify-between">
+				{#if showWrapToggle || hasRenderedView(kind)}
+					<div class="flex items-center gap-2">
+						{#if showWrapToggle}
+							<Checkbox bind:checked={wrap} class="px-2 text-foreground-muted">
+								Wrap
+							</Checkbox>
+						{/if}
+						{#if hasRenderedView(kind)}
+							<ButtonGroup>
+								<Button
+									size="small"
+									icon={CodeXml}
+									aria-pressed={view === "code"}
+									{...segmentProps(view === "code")}
+									onclick={() => (view = "code")}
+									title="View source"
+								/>
+								<Button
+									size="small"
+									icon={Eye}
+									aria-pressed={view === "rendered"}
+									{...segmentProps(view === "rendered")}
+									onclick={() => (view = "rendered")}
+									title="View rendered"
+								/>
+							</ButtonGroup>
+						{/if}
+					</div>
+				{/if}
+				<ButtonGroup class="max-md:ms-auto">
+					{#if copyText !== null}
+						<CopyButton
+							value={copyText}
+							variant="default"
+							label="Copy contents"
+							title="Copy contents"
+						/>
+					{/if}
+					<Button
+						size="small"
+						href={rawHref}
+						download={fileName}
+						title="Download"
+						aria-label="Download"
+						icon={Download}
+					/>
 					<Button
 						size="small"
-						icon={CodeXml}
-						aria-pressed={view === "code"}
-						{...segmentProps(view === "code")}
-						onclick={() => (view = "code")}
-					>
-						Source
-					</Button>
+						href={rawHref}
+						target="_blank"
+						title="Open raw file"
+						icon={ExternalLink}
+						iconSide="right"
+					/>
 					<Button
 						size="small"
-						icon={Eye}
-						aria-pressed={view === "rendered"}
-						{...segmentProps(view === "rendered")}
-						onclick={() => (view = "rendered")}
-					>
-						Preview
-					</Button>
-				</ButtonGroup>
-			{/if}
-			<ButtonGroup>
-				{#if copyText !== null}
-					<CopyButton
-						value={copyText}
-						variant="default"
-						label="Copy contents"
-						title="Copy contents"
+						href={historyHref}
+						title="File history"
+						aria-label="File history"
+						icon={History}
 					/>
-				{/if}
-				<Button
-					size="small"
-					href={rawHref}
-					download={fileName}
-					title="Download"
-					aria-label="Download"
-					icon={Download}
-				/>
-				<Button
-					size="small"
-					href={rawHref}
-					target="_blank"
-					title="Open raw file"
-					icon={ExternalLink}
-					iconSide="right"
-				>
-					Raw
-				</Button>
-				<Button
-					size="small"
-					href={historyHref}
-					title="File history"
-					aria-label="File history"
-					icon={History}
-				/>
-			</ButtonGroup>
+				</ButtonGroup>
+			</div>
 		{/if}
 	</div>
 </div>
-- 
2.54.0