From 164fc7c09fa24f437d2bce1151fbbe442035904f Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Tue, 1 Sep 2026 01:58:14 +0900
Subject: [PATCH] web: align commit diff sticky header with viewport

Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/components/repo/CommitView.svelte |  1 +
 .../lib/components/repo/pulls/PullDiff.svelte | 39 +++++++++++++------
 .../repo/pulls/PullDiffFileCard.svelte        | 18 +++++++--
 .../repo/pulls/PullDiffFileList.svelte        |  4 +-
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/repo/CommitView.svelte b/web/src/lib/components/repo/CommitView.svelte
index c330e5f2c..465448a79 100644
--- a/web/src/lib/components/repo/CommitView.svelte
+++ b/web/src/lib/components/repo/CommitView.svelte
@@ -70,6 +70,7 @@
 			error={mirror.error}
 			initialDiffStyle={diffStyle}
 			{downloadUrls}
+			stickyTop="viewport"
 		/>
 	{:else}
 		<DiffView {files} {stat} {diffStyle} {downloadUrls} {blobBase} {prerendered} />
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
index 1aca4f33a..5f2ea41f9 100644
--- a/web/src/lib/components/repo/pulls/PullDiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -23,6 +23,7 @@
 		loading?: boolean;
 		initialDiffStyle?: DiffStyle;
 		downloadUrls?: { patch: string; diff: string };
+		stickyTop?: "page" | "viewport";
 	}
 
 	let {
@@ -31,7 +32,8 @@
 		error,
 		loading = false,
 		initialDiffStyle = "unified",
-		downloadUrls
+		downloadUrls,
+		stickyTop = "page"
 	}: Props = $props();
 
 	let treeOpen = $state(true);
@@ -43,9 +45,19 @@
 	<!-- file tree -->
 	{#if treeOpen}
 		<aside
-			class="sticky top-11 flex max-h-[calc(100vh-3.75rem)] w-fit min-w-40 max-w-80 shrink-0 flex-col self-start"
+			class={[
+				"sticky flex w-fit max-w-80 min-w-40 shrink-0 flex-col self-start",
+				stickyTop === "viewport"
+					? "top-0 max-h-[calc(100vh-1rem)]"
+					: "top-11 max-h-[calc(100vh-3.75rem)]"
+			]}
 		>
-			<div class="sticky top-11 bg-background-default py-2">
+			<div
+				class={[
+					"sticky bg-background-default py-2",
+					stickyTop === "viewport" ? "top-0" : "top-11"
+				]}
+			>
 				<Button icon={PanelLeftClose} onclick={() => (treeOpen = false)} />
 			</div>
 			<div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small">
@@ -63,7 +75,10 @@
 	<!-- diffs -->
 	<div class="min-w-0 flex-1">
 		<div
-			class="sticky top-11 z-20 flex items-center justify-between bg-background-default py-2"
+			class={[
+				"sticky z-20 flex items-center justify-between bg-background-default py-2",
+				stickyTop === "viewport" ? "top-0" : "top-11"
+			]}
 		>
 			<div class="flex items-center gap-3">
 				{#if !treeOpen}
@@ -123,12 +138,14 @@
 				</ButtonGroup>
 			</div>
 		</div>
-		<!-- sits just above the first file header's sticky position (top-24.5). the
-		     toolbar above assumes a fixed height, which can be off by a few pixels
-		     at some viewport sizes; this shim plugs the resulting gap so the diff
-		     scrolling underneath doesn't peek through. harmless when there's no gap:
-		     the toolbar's higher z-index paints over it. -->
-		<div class="sticky top-18.5 -mb-6 h-6 bg-background-default" aria-hidden="true"></div>
+		<!-- plugs rounding gaps between the sticky toolbar and file headers -->
+		<div
+			class={[
+				"sticky -mb-6 h-6 bg-background-default",
+				stickyTop === "viewport" ? "top-7.5" : "top-18.5"
+			]}
+			aria-hidden="true"
+		></div>
 
 		{#if error}
 			<div
@@ -140,7 +157,7 @@
 			<!-- a new diff gets a fresh fill pool by teardown, so a version switch
 			     cannot show the previous version's text under a repeated file path -->
 			{#key diff}
-				<PullDiffFileList {deps} {diff} {diffStyle} {allOpen} />
+				<PullDiffFileList {deps} {diff} {diffStyle} {allOpen} {stickyTop} />
 			{/key}
 		{:else if diff}
 			<div
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
index 938e379a6..39194771b 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
@@ -19,11 +19,19 @@
 		contents?: FileContentsResult;
 		diffStyle?: DiffStyle;
 		open?: boolean;
+		stickyTop?: "page" | "viewport";
 		// registers this card with the list's shared IntersectionObserver
 		observe: Action<HTMLElement>;
 	}
 
-	let { file, contents, diffStyle = "unified", open = true, observe }: Props = $props();
+	let {
+		file,
+		contents,
+		diffStyle = "unified",
+		open = true,
+		stickyTop = "page",
+		observe
+	}: Props = $props();
 
 	// the diff endpoint hands us metadata only, so unlike the commit page we give
 	// pierre both file contents and let it diff them — which is also what makes
@@ -73,8 +81,12 @@
 
 <div use:observe data-diff-key={file.key} class="overflow-clip rounded-sm drop-shadow-xs">
 	<details id="file-{file.name}" {open} class="group w-full">
-		<!-- sticks below the diff toolbar, which is itself sticky at top-11 -->
-		<summary class="sticky top-24.5 z-10 cursor-pointer list-none bg-background-default">
+		<summary
+			class={[
+				"sticky z-10 cursor-pointer list-none bg-background-default",
+				stickyTop === "viewport" ? "top-13.5" : "top-24.5"
+			]}
+		>
 			<div
 				class="flex justify-between rounded-sm border border-border-default bg-background-default group-open:rounded-b-none"
 			>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileList.svelte b/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
index 6324a58a6..b237245b1 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
@@ -16,9 +16,10 @@
 		diff: PullDiff;
 		diffStyle?: DiffStyle;
 		allOpen?: boolean;
+		stickyTop?: "page" | "viewport";
 	}
 
-	let { deps, diff, diffStyle = "unified", allOpen = true }: Props = $props();
+	let { deps, diff, diffStyle = "unified", allOpen = true, stickyTop = "page" }: Props = $props();
 
 	// the payload carries no line text, so each card's two sides are fetched on
 	// demand as it nears the viewport, a few at a time. the caller wraps this
@@ -98,6 +99,7 @@
 			contents={entries[file.key]}
 			{diffStyle}
 			open={allOpen}
+			{stickyTop}
 			{observe}
 		/>
 	{/each}
-- 
2.51.2