From b225e9228beac99ec5ddb03b9c7f4b4fce4a442d Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web: rescale notifications, comments and reactions

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/comment/Comment.svelte      | 14 +++++++-------
 web/src/lib/components/comment/CommentBox.svelte   |  4 ++--
 web/src/lib/components/comment/CommentCard.svelte  | 10 +++++-----
 .../lib/components/comment/CommentEditor.svelte    |  4 ++--
 web/src/lib/components/comment/CommentList.svelte  |  2 +-
 .../lib/components/comment/CommentSection.svelte   |  2 +-
 .../notifications/NotificationBell.svelte          | 12 ++++++------
 .../notifications/NotificationItem.stories.svelte  |  2 +-
 .../notifications/NotificationItem.svelte          | 11 +++++++----
 .../notifications/NotificationList.stories.svelte  |  2 +-
 .../notifications/NotificationList.svelte          |  8 ++++----
 .../notifications/NotificationOfferAction.svelte   |  6 +++---
 .../notifications/NotificationToolbar.svelte       |  8 ++------
 .../lib/components/reaction/ReactionPicker.svelte  |  2 +-
 web/src/lib/components/reaction/Reactions.svelte   |  2 +-
 15 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/web/src/lib/components/comment/Comment.svelte b/web/src/lib/components/comment/Comment.svelte
index b93e69bcb..523b542ae 100644
--- a/web/src/lib/components/comment/Comment.svelte
+++ b/web/src/lib/components/comment/Comment.svelte
@@ -42,20 +42,20 @@
 
 {#if deleted}
 	<div
-		class={`text-foreground-muted italic ${variant === "top" ? "border-b border-border-default bg-background-default p-4 pb-5" : "pt-3 pr-4 pb-4"}`}
+		class={`text-foreground-muted italic ${variant === "top" ? "border-b border-border-default bg-background-default p-md pb-lg" : "pt-sm pr-md pb-md"}`}
 	>
 		This comment was deleted.
 	</div>
 {:else}
 	<div
-		class={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-1.5 ${variant === "top" ? "border-b border-border-default bg-background-default p-4 pb-5" : "pt-3 pr-4 pb-4"}`}
+		class={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-1.5 ${variant === "top" ? "border-b border-border-default bg-background-default p-md pb-lg" : "pt-sm pr-md pb-md"}`}
 	>
 		<div class="self-center">
 			<ProfilePopover did={authorDid}>
 				<VouchAvatar did={authorDid} handle={authorHandle} size="large" />
 			</ProfilePopover>
 		</div>
-		<div class="flex flex-wrap items-center gap-2 text-foreground-muted">
+		<div class="flex flex-wrap items-center gap-xs text-foreground-muted">
 			<ProfilePopover did={authorDid}>
 				<User handle={authorHandle} did={authorDid} showImage={false} link />
 			</ProfilePopover>
@@ -67,17 +67,17 @@
 		</div>
 		<div class="col-start-2">
 			{#if editor}
-				<div class="mt-1">{@render editor()}</div>
+				<div class="mt-2xs">{@render editor()}</div>
 			{:else if bodyHtml}
-				<article class="markup mt-1" use:enhanceCodeblocks={bodyHtml}>
+				<article class="markup mt-2xs" use:enhanceCodeblocks={bodyHtml}>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 					{@html bodyHtml}
 				</article>
 			{:else if body}
-				<article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
+				<article class="mt-2xs whitespace-pre-wrap text-foreground-default">{body}</article>
 			{/if}
 			{#if !editor}
-				<Reactions {reactions} {subjectUri} onchange={onreactionschange} class="mt-2" />
+				<Reactions {reactions} {subjectUri} onchange={onreactionschange} class="mt-xs" />
 			{/if}
 		</div>
 	</div>
diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte
index c00a172ba..77038e0d5 100644
--- a/web/src/lib/components/comment/CommentBox.svelte
+++ b/web/src/lib/components/comment/CommentBox.svelte
@@ -60,11 +60,11 @@
 {/snippet}
 
 {#if isThread}
-	<div class="bg-background-default/50 p-4">
+	<div class="bg-background-default/50 p-md">
 		{@render editor()}
 	</div>
 {:else}
-	<Card padding="small" class="drop-shadow-xs">
+	<Card padding="small">
 		{@render editor()}
 	</Card>
 {/if}
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index afa22a5dc..27e849da1 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -115,7 +115,7 @@
 
 {#snippet commentActions(comment: CommentView, noun: "comment" | "reply")}
 	<div
-		class="flex items-center gap-0 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+		class="flex items-center gap-none opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
 	>
 		<ReactionPicker
 			subjectUri={comment.uri}
@@ -215,7 +215,7 @@
 	</div>
 
 	{#if thread.replies.length}
-		<div class="ml-8">
+		<div class="ml-2xl">
 			{#each thread.replies as reply, i (reply.uri)}
 				{#snippet replyEditor()}
 					{@render commentEditor(reply, thread.self.uri, thread.self.cid)}
@@ -223,7 +223,7 @@
 				{#snippet replyActions()}
 					{@render commentActions(reply, "reply")}
 				{/snippet}
-				<div class="group relative isolate -ml-4">
+				<div class="group relative isolate -ml-md">
 					<!-- thread connector; on the last reply it stops at the avatar's centre (h-8) -->
 					<div
 						class={`pointer-events-none absolute top-0 left-4 -z-10 w-px -translate-x-1 bg-border-default ${i === thread.replies.length - 1 ? "h-8" : "bottom-0"}`}
@@ -247,7 +247,7 @@
 	{/if}
 
 	{#if deleteSelected.error}
-		<div class="border-t border-border-default px-6 py-2">
+		<div class="border-t border-border-default px-xl py-xs">
 			<ErrorAlert label={deleteSelected.error} />
 		</div>
 	{/if}
@@ -275,7 +275,7 @@
 		</div>
 	{:else}
 		<div
-			class={`flex items-center gap-2 bg-background-default/50 px-6 py-2 ${thread.replies.length ? "border-t border-border-default" : ""}`}
+			class={`flex items-center gap-xs bg-background-default/50 px-xl py-xs ${thread.replies.length ? "border-t border-border-default" : ""}`}
 		>
 			{#if currentUser}
 				<button
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index 2f516eb7e..1c7ad6cea 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -136,7 +136,7 @@
 	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
 </script>
 
-<form onsubmit={publish.run} class="flex flex-col gap-2">
+<form onsubmit={publish.run} class="flex flex-col gap-xs">
 	<MarkdownEditor
 		name="body"
 		{rows}
@@ -161,7 +161,7 @@
 				group="comment-editor"
 			/>
 		{/if}
-		<div class="ml-auto flex flex-row gap-2">
+		<div class="ml-auto flex flex-row gap-xs">
 			{#if oncancel}
 				<Button
 					type="button"
diff --git a/web/src/lib/components/comment/CommentList.svelte b/web/src/lib/components/comment/CommentList.svelte
index f321eb709..6c6620230 100644
--- a/web/src/lib/components/comment/CommentList.svelte
+++ b/web/src/lib/components/comment/CommentList.svelte
@@ -18,7 +18,7 @@
 </script>
 
 {#if threads.length}
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-md">
 		{#each threads as thread (thread.self.uri)}
 			<CommentCard
 				{thread}
diff --git a/web/src/lib/components/comment/CommentSection.svelte b/web/src/lib/components/comment/CommentSection.svelte
index 12dc3fe58..92f3d619e 100644
--- a/web/src/lib/components/comment/CommentSection.svelte
+++ b/web/src/lib/components/comment/CommentSection.svelte
@@ -41,7 +41,7 @@
 	};
 </script>
 
-<div class={["flex flex-col gap-4", className]}>
+<div class={["flex flex-col gap-md", className]}>
 	<CommentList
 		{threads}
 		{subjectUri}
diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index eeec28a10..56499a7fb 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -3,7 +3,7 @@
 	import { resolve } from "$app/paths";
 	import ArrowRight from "$icon/arrow-right";
 	import Bell from "$icon/bell";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
 	import { createLoad } from "$lib/action.svelte";
 	import {
@@ -72,7 +72,7 @@
 {#snippet count()}
 	{#if shared.unread > 0}
 		<span
-			class="pointer-events-none absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-background-info-emphasis px-1 typography-paragraph-mini text-foreground-on-emphasis"
+			class="pointer-events-none absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-background-info-emphasis px-2xs typography-paragraph-mini text-foreground-on-emphasis"
 			aria-hidden="true"
 		>
 			{badge}
@@ -103,10 +103,10 @@
 		menuClass="w-[36rem]"
 	>
 		{#snippet trigger()}
-			<Bell class="size-4" aria-hidden="true" />
+			<Bell class={buttonIcon({ size: "regular" })} aria-hidden="true" />
 		{/snippet}
 
-		<div class="p-2">
+		<div class="p-xs">
 			<NotificationToolbar
 				{readFilter}
 				{categoryFilter}
@@ -130,10 +130,10 @@
 		<a
 			href={viewAll}
 			onclick={dismiss}
-			class="flex items-center justify-end gap-1 p-2 typography-paragraph-small text-foreground-muted no-underline transition-colors hover:bg-background-subtle hover:text-foreground-default hover:no-underline md:px-4"
+			class="flex items-center justify-end gap-2xs p-xs typography-paragraph-small text-foreground-muted no-underline transition-colors hover:bg-background-subtle hover:text-foreground-default hover:no-underline md:px-md"
 		>
 			View all
-			<ArrowRight class="size-4" aria-hidden="true" />
+			<ArrowRight class="size-3.5" aria-hidden="true" />
 		</a>
 	</Dropdown>
 
diff --git a/web/src/lib/components/notifications/NotificationItem.stories.svelte b/web/src/lib/components/notifications/NotificationItem.stories.svelte
index c187ef3ac..5bdbc56bf 100644
--- a/web/src/lib/components/notifications/NotificationItem.stories.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.stories.svelte
@@ -22,7 +22,7 @@
 	const read = (n: NotificationSummary): NotificationSummary => ({ ...n, read: true });
 
 	const frame =
-		"grid grid-cols-[auto_1fr_auto] gap-x-4 divide-y divide-border-default overflow-hidden rounded-sm border border-border-default";
+		"grid grid-cols-[auto_1fr_auto] gap-x-md divide-y divide-border-default overflow-hidden rounded-sm border border-border-default";
 
 	const withdrawn = "no membership offer for you on this knot";
 
diff --git a/web/src/lib/components/notifications/NotificationItem.svelte b/web/src/lib/components/notifications/NotificationItem.svelte
index d24d00abe..34947dcaa 100644
--- a/web/src/lib/components/notifications/NotificationItem.svelte
+++ b/web/src/lib/components/notifications/NotificationItem.svelte
@@ -6,7 +6,7 @@
 			// the row subscribes to NotificationList's columns, so every row shares one
 			// lead column width and the descriptions line up down the whole list. it
 			// only lays out correctly inside that grid.
-			root: "group/notification relative isolate col-span-full grid grid-cols-subgrid items-center gap-y-1 px-2 py-4 hover:border-border-disabled md:px-4",
+			root: "group/notification relative isolate col-span-full grid grid-cols-subgrid items-center gap-y-2xs px-xs py-sm hover:border-border-disabled md:px-md",
 			icon: "row-start-1 size-3.5 shrink-0",
 			header: "row-start-1 flex min-w-0 items-center gap-1.5 overflow-hidden typography-paragraph-small",
 			phrase: "truncate text-foreground-muted no-underline after:absolute after:inset-0 after:z-1 hover:no-underline",
@@ -37,6 +37,7 @@
 <script lang="ts">
 	import Mail from "$icon/mail";
 	import MailCheck from "$icon/mail-check";
+	import { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import User from "$lib/components/ui/User.svelte";
@@ -99,7 +100,9 @@
 	<div class={style.meta()}>
 		<TimeAgo
 			value={notification.createdAt}
-			class={style.time({ class: "md:group-hover/notification:invisible" })}
+			class={style.time({
+				class: onToggleRead ? "md:group-hover/notification:invisible" : undefined
+			})}
 		/>
 		{#if onToggleRead}
 			<button
@@ -110,9 +113,9 @@
 				onclick={toggle}
 			>
 				{#if notification.read}
-					<Mail class="size-4" aria-hidden="true" />
+					<Mail class={buttonIcon({ size: "small" })} aria-hidden="true" />
 				{:else}
-					<MailCheck class="size-4" aria-hidden="true" />
+					<MailCheck class={buttonIcon({ size: "small" })} aria-hidden="true" />
 				{/if}
 			</button>
 		{/if}
diff --git a/web/src/lib/components/notifications/NotificationList.stories.svelte b/web/src/lib/components/notifications/NotificationList.stories.svelte
index 730cc290b..c9e63b44b 100644
--- a/web/src/lib/components/notifications/NotificationList.stories.svelte
+++ b/web/src/lib/components/notifications/NotificationList.stories.svelte
@@ -66,7 +66,7 @@
 
 <Story name="Loading two-column">
 	{#snippet template()}
-		<div class="mx-auto hidden max-w-5xl p-4 md:grid md:grid-cols-2 md:gap-6">
+		<div class="mx-auto hidden max-w-page p-md md:grid md:grid-cols-2 md:gap-xl">
 			<NotificationList loading={true} title="work" />
 			<NotificationList loading={true} title="social" />
 		</div>
diff --git a/web/src/lib/components/notifications/NotificationList.svelte b/web/src/lib/components/notifications/NotificationList.svelte
index a0870b0e7..e3c180bda 100644
--- a/web/src/lib/components/notifications/NotificationList.svelte
+++ b/web/src/lib/components/notifications/NotificationList.svelte
@@ -63,13 +63,13 @@
 		recolor that line, and data-notification is what tells a row from a date heading.
 	-->
 	<div
-		class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-4 divide-y divide-border-default overflow-hidden pointer-fine:[&>*:has(+[data-notification]:hover)]:border-border-disabled {border
+		class="grid h-fit grid-cols-[auto_1fr_auto] content-start gap-x-md divide-y divide-border-default overflow-hidden pointer-fine:[&>*:has(+[data-notification]:hover)]:border-border-disabled {border
 			? 'rounded-sm border border-border-default'
 			: ''}"
 	>
 		{#if title || unreadCount > 0}
 			<div
-				class="col-span-full flex items-center justify-between bg-background-default p-2 md:px-4"
+				class="col-span-full flex items-center justify-between bg-background-default p-xs md:px-md"
 			>
 				<h2
 					class="typography-paragraph-small font-medium text-foreground-default capitalize"
@@ -78,7 +78,7 @@
 				</h2>
 				{#if unreadCount > 0}
 					<span
-						class="flex h-5 min-w-5 items-center justify-center rounded-full bg-background-info-emphasis px-1 typography-paragraph-small text-foreground-on-emphasis"
+						class="flex h-5 min-w-5 items-center justify-center rounded-full bg-background-info-emphasis px-2xs typography-paragraph-small text-foreground-on-emphasis"
 					>
 						{formatCount(unreadCount)}
 					</span>
@@ -100,7 +100,7 @@
 				{#if section.items.length > 0}
 					{#if section.label}
 						<div
-							class="col-span-full bg-background-subtle p-2 typography-paragraph-small text-foreground-muted md:px-4"
+							class="col-span-full bg-background-subtle p-xs typography-paragraph-small text-foreground-muted md:px-md"
 						>
 							{section.label}
 						</div>
diff --git a/web/src/lib/components/notifications/NotificationOfferAction.svelte b/web/src/lib/components/notifications/NotificationOfferAction.svelte
index 7723cbd4f..9d7727704 100644
--- a/web/src/lib/components/notifications/NotificationOfferAction.svelte
+++ b/web/src/lib/components/notifications/NotificationOfferAction.svelte
@@ -4,7 +4,7 @@
 	import { errorMessage } from "$lib/api/load";
 	import { getAuth } from "$lib/auth.svelte";
 	import { missingPermissions } from "$lib/auth/scopes";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import type { NotificationOffer } from "$lib/components/notifications/types";
 
 	interface Props {
@@ -61,12 +61,12 @@
 </script>
 
 {#if agent}
-	<div class={["relative z-10 flex w-fit max-w-full flex-wrap items-center gap-2", className]}>
+	<div class={["relative z-10 flex w-fit max-w-full flex-wrap items-center gap-xs", className]}>
 		{#if progress.kind === "accepted"}
 			<span
 				class="flex items-center gap-1.5 typography-paragraph-small text-foreground-success"
 			>
-				<Check class="size-4 shrink-0" aria-hidden="true" />Accepted
+				<Check class={buttonIcon({ size: "small" })} aria-hidden="true" />Accepted
 			</span>
 		{:else}
 			{#if ungranted.length > 0}
diff --git a/web/src/lib/components/notifications/NotificationToolbar.svelte b/web/src/lib/components/notifications/NotificationToolbar.svelte
index 5b1a5b868..3ea54eceb 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.svelte
@@ -46,7 +46,6 @@
 )}
 	<Button
 		{...segmentProps(readFilter === filter)}
-		size="small"
 		{icon}
 		href={onReadFilter ? undefined : pageHref(filter, categoryFilter)}
 		onclick={onReadFilter ? () => onReadFilter(filter) : undefined}
@@ -55,8 +54,8 @@
 	</Button>
 {/snippet}
 
-<div class="flex flex-wrap items-center justify-between gap-2">
-	<div class="flex flex-wrap items-center gap-2">
+<div class="flex flex-wrap items-center justify-between gap-xs">
+	<div class="flex flex-wrap items-center gap-xs">
 		<ButtonGroup>
 			{@render readSegment("inbox", "Inbox", Inbox)}
 			{@render readSegment("unread", "Unread", Glasses)}
@@ -65,7 +64,6 @@
 		{#if hasNotifications}
 			<Button
 				variant="ghost"
-				size="small"
 				icon={CheckCheck}
 				onclick={() => onMarkAllRead?.()}
 				aria-label="Mark all read"
@@ -81,7 +79,6 @@
 				{@const segment = segmentProps(categoryFilter === category)}
 				<Button
 					{...segment}
-					size="small"
 					class={[segment.class, "capitalize"].filter(Boolean).join(" ")}
 					onclick={() => onCategoryFilter(category)}
 				>
@@ -94,7 +91,6 @@
 	{#if preferences}
 		<Button
 			variant="ghost"
-			size="small"
 			icon={Cog}
 			href={resolve("/settings/notifications" as "/")}
 			aria-label="Preferences"
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
index 210c22c77..42bb1a001 100644
--- a/web/src/lib/components/reaction/ReactionPicker.svelte
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -84,7 +84,7 @@
 		<SmilePlus class="size-3.5" />
 	{/snippet}
 
-	<div class="grid grid-cols-4 p-1">
+	<div class="grid grid-cols-4 p-2xs">
 		{#each ORDERED_REACTION_KINDS as kind (kind)}
 			<Button
 				variant="ghost"
diff --git a/web/src/lib/components/reaction/Reactions.svelte b/web/src/lib/components/reaction/Reactions.svelte
index aead155ce..489bdc011 100644
--- a/web/src/lib/components/reaction/Reactions.svelte
+++ b/web/src/lib/components/reaction/Reactions.svelte
@@ -135,7 +135,7 @@
 </script>
 
 {#if groups.length || pickerAlways}
-	<div class={`flex flex-wrap items-center gap-1 ${className}`}>
+	<div class={`flex flex-wrap items-center gap-2xs ${className}`}>
 		{#each groups as reaction (reaction.kind)}
 			<Reaction
 				{reaction}
-- 
2.51.2