From 023e8a07ea74ea44b04b21b71ad77a5202b127aa Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 3 Sep 2026 19:11:21 +0100
Subject: [PATCH] web/components: fixups to long RepoHeader

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/.storybook/MockAuth.svelte                |  2 +-
 .../components/repo/RepoHeader.stories.svelte | 38 +++++++-
 web/src/lib/components/repo/RepoHeader.svelte | 74 ++++++++-------
 .../components/repo/TopicList.stories.svelte  | 37 ++++++++
 web/src/lib/components/repo/TopicList.svelte  | 90 +++++++++++++++++++
 5 files changed, 200 insertions(+), 41 deletions(-)
 create mode 100644 web/src/lib/components/repo/TopicList.stories.svelte
 create mode 100644 web/src/lib/components/repo/TopicList.svelte

diff --git a/web/.storybook/MockAuth.svelte b/web/.storybook/MockAuth.svelte
index 1788afcb8..6ed7e515a 100644
--- a/web/.storybook/MockAuth.svelte
+++ b/web/.storybook/MockAuth.svelte
@@ -28,7 +28,7 @@
 	// land in the form's catch block by default.
 	import { setContext, type Snippet } from "svelte";
 	import { AUTH_KEY, type Auth } from "$lib/auth.svelte";
-	import oauthMetadata from "$lib/oauth-client-metadata.json";
+	import oauthMetadata from "$lib/oauth-client-metadata";
 
 	interface Props {
 		auth?: MockAuthParam;
diff --git a/web/src/lib/components/repo/RepoHeader.stories.svelte b/web/src/lib/components/repo/RepoHeader.stories.svelte
index c4f7c87a7..a1b174cfa 100644
--- a/web/src/lib/components/repo/RepoHeader.stories.svelte
+++ b/web/src/lib/components/repo/RepoHeader.stories.svelte
@@ -5,6 +5,7 @@
 	import type { RepoInfo } from "$lib/components/repo/types";
 
 	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+	type InteractionPlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;
 
 	// the star control is the same ButtonGroup signed in or out, so it always
 	// stands exactly as tall as the fork group beside it
@@ -30,6 +31,26 @@
 	};
 	const counts = { stars: 128, issues: 7, pulls: 3, forks: 12 };
 
+	const topicsExpand = async ({ canvas, userEvent }: InteractionPlayContext) => {
+		const summary = await canvas.findByText(/^\+\d+ more$/);
+		const details = summary.closest("details")!;
+		await expect(details.open).toBe(false);
+		await userEvent.click(summary);
+		await expect(details.open).toBe(true);
+	};
+
+	const manyTopics = Array.from({ length: 20 }, (_, i) => `topic-${i + 1}`);
+
+	const noPlaceholderWhenForked = async ({ canvas }: PlayContext) => {
+		await canvas.findByText("forked from");
+		expect(canvas.queryByText("This repository has no description")).toBe(null);
+	};
+
+	const placeholderWhenTrulyEmpty = async ({ canvas }: PlayContext) => {
+		const placeholder = await canvas.findByText("This repository has no description");
+		expect(placeholder).toBeTruthy();
+	};
+
 	const signedOutStars = async ({
 		canvas
 	}: Pick<StoryContext<Record<string, unknown>>, "canvas">) => {
@@ -50,12 +71,27 @@
 <Story name="Full metadata" asChild play={groupsShareAHeight}>
 	<RepoHeader {repo} {counts} />
 </Story>
-<Story name="No description or website" asChild>
+<Story name="No description or website, still a fork" asChild play={noPlaceholderWhenForked}>
 	<RepoHeader
 		repo={{ ...repo, description: undefined, website: undefined, topics: [] }}
 		{counts}
 	/>
 </Story>
+<Story name="No metadata at all" asChild play={placeholderWhenTrulyEmpty}>
+	<RepoHeader
+		repo={{
+			...repo,
+			description: undefined,
+			website: undefined,
+			topics: [],
+			source: undefined
+		}}
+		{counts}
+	/>
+</Story>
+<Story name="Many topics" asChild play={topicsExpand}>
+	<RepoHeader repo={{ ...repo, topics: manyTopics }} {counts} />
+</Story>
 <Story name="Not a fork" asChild>
 	<RepoHeader repo={{ ...repo, source: undefined }} {counts} />
 </Story>
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index f9884dab0..0e7c4d054 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -5,7 +5,7 @@
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
-	import Tag from "$lib/components/ui/Tag.svelte";
+	import TopicList from "$lib/components/repo/TopicList.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import bonesLoadingprimitivesCount from "$lib/bones/bones-loadingprimitives--count.bones.json";
@@ -96,49 +96,45 @@
 		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
 	</div>
 
-	<div
-		class="flex h-5 items-center gap-x-4 overflow-x-auto overflow-y-hidden typography-paragraph-small whitespace-nowrap text-foreground-muted"
-	>
-		{#if repo.description}
-			<span class="shrink-0">{repo.description}</span>
-		{:else}
-			<span class="shrink-0 italic">This repository has no description</span>
-		{/if}
+	<div class="flex flex-col gap-1">
+		<div
+			class="flex flex-wrap items-center gap-x-4 gap-y-1 typography-paragraph-small text-foreground-muted"
+		>
+			{#if repo.description}
+				<span>{repo.description}</span>
+			{/if}
+
+			<Pending>
+				{@const resolvedSource = await (source ?? repo.source)}
+				{#if resolvedSource}
+					<span class="flex items-center gap-1">
+						<GitFork class="size-3 shrink-0" aria-hidden="true" />
+						<span>forked from</span>
+						<a
+							href={resolve(
+								`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
+							)}
+							class="underline"
+						>
+							{resolvedSource.ownerHandle}/{resolvedSource.name}
+						</a>
+					</span>
+				{:else if !repo.description && !repo.website && topics.length === 0}
+					<span class="italic">This repository has no description</span>
+				{/if}
+			</Pending>
 
-		<Pending>
-			{@const resolvedSource = await (source ?? repo.source)}
-			{#if resolvedSource}
-				<span class="flex shrink-0 items-center gap-1">
-					<GitFork class="size-3 shrink-0" aria-hidden="true" />
-					<span>forked from</span>
-					<a
-						href={resolve(
-							`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
-						)}
-						class="underline"
+			{#if repo.website}
+				<span class="flex items-center gap-1">
+					<Globe class="size-4 shrink-0" aria-hidden="true" />
+					<a href={repo.website} rel="external ugc nofollow noopener noreferrer"
+						>{trimScheme(repo.website)}</a
 					>
-						{resolvedSource.ownerHandle}/{resolvedSource.name}
-					</a>
 				</span>
 			{/if}
-		</Pending>
-
-		{#if repo.website}
-			<span class="flex shrink-0 items-center gap-1">
-				<Globe class="size-4 shrink-0" aria-hidden="true" />
-				<a href={repo.website} rel="external ugc nofollow noopener noreferrer"
-					>{trimScheme(repo.website)}</a
-				>
-			</span>
-		{/if}
+		</div>
 
-		{#if topics.length}
-			<div class="flex shrink-0 items-center gap-1">
-				{#each topics as topic (topic)}
-					<Tag color="gray">{topic}</Tag>
-				{/each}
-			</div>
-		{/if}
+		<TopicList {topics} />
 	</div>
 
 	{@render repoActions("mt-2 flex flex-wrap items-start justify-end gap-2 sm:hidden")}
diff --git a/web/src/lib/components/repo/TopicList.stories.svelte b/web/src/lib/components/repo/TopicList.stories.svelte
new file mode 100644
index 000000000..c8a762986
--- /dev/null
+++ b/web/src/lib/components/repo/TopicList.stories.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import TopicList from "$lib/components/repo/TopicList.svelte";
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;
+
+	const manyTopics = Array.from({ length: 20 }, (_, i) => `topic-${i + 1}`);
+
+	const topicsExpand = async ({ canvas, userEvent }: PlayContext) => {
+		const summary = await canvas.findByText(/^\+\d+ more$/);
+		const details = summary.closest("details")!;
+		await expect(details.open).toBe(false);
+		await userEvent.click(summary);
+		await expect(details.open).toBe(true);
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/TopicList",
+		component: TopicList,
+		tags: ["autodocs"]
+	});
+</script>
+
+<Story name="No topics" args={{ topics: [] }} />
+
+<Story name="Fits on one line" asChild>
+	<div class="w-96">
+		<TopicList topics={["atproto", "git", "svelte"]} />
+	</div>
+</Story>
+
+<Story name="Truncated, click to expand" asChild play={topicsExpand}>
+	<div class="w-64">
+		<TopicList topics={manyTopics} />
+	</div>
+</Story>
diff --git a/web/src/lib/components/repo/TopicList.svelte b/web/src/lib/components/repo/TopicList.svelte
new file mode 100644
index 000000000..b6542a54a
--- /dev/null
+++ b/web/src/lib/components/repo/TopicList.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import Tag from "$lib/components/ui/Tag.svelte";
+
+	interface Props {
+		topics: string[];
+	}
+
+	let { topics }: Props = $props();
+
+	const GAP = 4;
+
+	let containerWidth = $state(0);
+	let tagRefs: (HTMLElement | undefined)[] = $state([]);
+	let moreRef: HTMLElement | undefined = $state();
+	let expanded = $state(false);
+	let visibleCount = $state(topics.length);
+
+	$effect(() => {
+		if (topics.length === 0) {
+			visibleCount = 0;
+			return;
+		}
+
+		const lastTag = tagRefs[topics.length - 1];
+		if (!lastTag) return;
+
+		if (lastTag.offsetLeft + lastTag.offsetWidth <= containerWidth) {
+			visibleCount = topics.length;
+			return;
+		}
+
+		const moreWidth = moreRef?.offsetWidth ?? 0;
+		let fit = 0;
+		for (const el of tagRefs) {
+			if (!el) break;
+			const rightEdge = el.offsetLeft + el.offsetWidth;
+			if (rightEdge + GAP + moreWidth > containerWidth) break;
+			fit++;
+		}
+		visibleCount = Math.max(1, fit);
+	});
+
+	const hiddenCount = $derived(topics.length - visibleCount);
+</script>
+
+{#if topics.length}
+	<div class="relative min-w-0" bind:clientWidth={containerWidth}>
+		<div
+			class="pointer-events-none invisible absolute inset-x-0 top-0 flex items-center gap-1"
+			aria-hidden="true"
+		>
+			{#each topics as topic, i (topic)}
+				<span bind:this={tagRefs[i]} class="inline-flex shrink-0"><Tag color="gray">{topic}</Tag></span>
+			{/each}
+			<span bind:this={moreRef} class="inline-flex shrink-0"
+				><span class="text-foreground-default underline">+{topics.length} more</span></span
+			>
+		</div>
+
+		<div class="flex flex-wrap items-center gap-1">
+			{#each topics.slice(0, visibleCount) as topic (topic)}
+				<Tag color="gray">{topic}</Tag>
+			{/each}
+			{#if hiddenCount > 0}
+				<details bind:open={expanded} class="contents">
+					<summary class="cursor-pointer text-foreground-default underline"
+						>+{hiddenCount} more</summary
+					>
+					<div class="flex basis-full flex-wrap items-center gap-1">
+						{#each topics.slice(visibleCount) as topic (topic)}
+							<Tag color="gray">{topic}</Tag>
+						{/each}
+					</div>
+				</details>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	summary::marker {
+		display: none;
+	}
+</style>
-- 
2.51.2