From 29b0c45ca2297943732ab0a1e171aec1d4704167 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Thu, 8 Oct 2026 08:33:26 +0100
Subject: [PATCH 1/2] Keep every icon at its declared size beside wrapping text

Icons are flex items with the default flex-shrink: 1, so a label long enough
to wrap squeezed them: the resolved decision popover's check and cross icons
and the settled decision line rendered at different, tiny sizes. Hold every
shared icon at its size from the base layer, and centre icons beside wrapping
text on the first line with one icon-first-line utility.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/chat.tsx                    |   4 +-
 apps/web/src/chat/work-progress.tsx           |   6 +-
 apps/web/src/icon-assets.test.ts              |   7 ++
 apps/web/src/theme.css                        |  17 +++
 bun.lock                                      |   3 +
 e2e/icon-size.e2e.ts                          | 116 ++++++++++++++++++
 e2e/source/icon-size.fixture.ts               | 103 ++++++++++++++++
 packages/editor/src/resolved-layer.tsx        |   6 +-
 packages/editor/src/styles.css                |   4 -
 packages/editor/src/widgets/questionnaire.tsx |   2 +-
 packages/icons/package.json                   |   5 +-
 packages/icons/src/brand.tsx                  |   9 +-
 packages/icons/src/filled.tsx                 |   1 +
 packages/icons/src/icon.test.tsx              |  12 ++
 14 files changed, 282 insertions(+), 13 deletions(-)
 create mode 100644 e2e/icon-size.e2e.ts
 create mode 100644 e2e/source/icon-size.fixture.ts
 create mode 100644 packages/icons/src/icon.test.tsx

diff --git a/apps/web/src/chat/chat.tsx b/apps/web/src/chat/chat.tsx
index 643eff17a..f16cc424a 100644
--- a/apps/web/src/chat/chat.tsx
+++ b/apps/web/src/chat/chat.tsx
@@ -698,8 +698,8 @@ export function Chat(
 						id={cueId}
 					>
 						{sendError
-							? <WarningIcon className="icon-danger" size={14} />
-							: <InfoIcon size={14} />}
+							? <WarningIcon className="icon-danger icon-first-line" size={14} />
+							: <InfoIcon className="icon-first-line" size={14} />}
 						<span>
 							{sendError ?? (researchBlock
 								? researchCopy[researchBlock]
diff --git a/apps/web/src/chat/work-progress.tsx b/apps/web/src/chat/work-progress.tsx
index ae7834ed8..f1dafa66e 100644
--- a/apps/web/src/chat/work-progress.tsx
+++ b/apps/web/src/chat/work-progress.tsx
@@ -47,7 +47,11 @@ function ToolCall(
 	let row = (
 		<>
 			{hasDetails && (
-				<ChevronIcon aria-hidden="true" className={open ? "rotate-90" : ""} size={14} />
+				<ChevronIcon
+					aria-hidden="true"
+					className={open ? "icon-first-line rotate-90" : "icon-first-line"}
+					size={14}
+				/>
 			)}
 			<span className="min-w-0 flex-1 break-words font-mono text-text-secondary">
 				{toolCopy(tool.name)}
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 32e429cd6..1af1c7769 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -181,3 +181,10 @@ test("directional controls reuse one chevron and one panel icon", () => {
 	expect(existsSync(join(root, "assets/icons/tool-chevron-right.svg"))).toBe(false);
 	expect(existsSync(join(root, "assets/figma/navigation/sidebar-right-3-hide.svg"))).toBe(false);
 });
+
+test("icons never shrink beside wrapping text", () => {
+	let css = readFileSync(join(root, "theme.css"), "utf8");
+	expect(css).toMatch(
+		/@layer base \{\s*:is\(\[data-nucleo-icon\], \[data-filled-icon\]\) \{\s*flex-shrink: 0;/,
+	);
+});
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index abdbb46b2..f3b0d4076 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -11,6 +11,7 @@
  * `.ts` is included because shared class lists can live outside components.
  */
 @source "../../../packages/editor/src/**/*.{ts,tsx}";
+@source "../../../packages/icons/src/**/*.{ts,tsx}";
 @source "../../../packages/question/src/**/*.{ts,tsx}";
 
 @utility ring-hairline {
@@ -22,6 +23,22 @@
 	color: var(--color-icon);
 }
 
+/*
+ * Every icon keeps its declared size: as a flex item it would otherwise shrink
+ * when the text beside it wraps. In the base layer so a utility can still opt out.
+ */
+@layer base {
+	:is([data-nucleo-icon], [data-filled-icon]) {
+		flex-shrink: 0;
+	}
+}
+
+/* Beside text that may wrap: centre on the first line instead of the whole block. */
+@utility icon-first-line {
+	align-self: flex-start;
+	translate: 0 calc(0.5lh - 50%);
+}
+
 @utility icon-danger {
 	--color-icon: var(--color-danger-icon);
 }
diff --git a/bun.lock b/bun.lock
index 404356379..07e2558cf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -185,6 +185,9 @@
       "devDependencies": {
         "@types/bun": "catalog:bun",
         "@types/react": "catalog:react",
+        "@types/react-dom": "catalog:react",
+        "react": "catalog:react",
+        "react-dom": "catalog:react",
       },
       "peerDependencies": {
         "react": "catalog:react",
diff --git a/e2e/icon-size.e2e.ts b/e2e/icon-size.e2e.ts
new file mode 100644
index 000000000..82d07f258
--- /dev/null
+++ b/e2e/icon-size.e2e.ts
@@ -0,0 +1,116 @@
+/**
+ * Icons keep their declared size beside text that wraps.
+ *
+ * Each icon is a flex item; without `flex-shrink: 0` a long label squeezes it
+ * narrower than its height. Layout is browser behaviour, so this measures every
+ * visible icon on the surfaces where labels wrap, at phone width.
+ */
+
+import { content, expect, test } from "./room";
+import { CHOSEN, SETTLED_ANSWER, SOURCE, STATE } from "./source/icon-size.fixture";
+
+import type { Locator, Page } from "@playwright/test";
+
+/** Icons whose rendered box differs from the size they were declared at. */
+function squeezed(scope: Locator) {
+	return scope.evaluateAll(roots =>
+		roots.flatMap(root =>
+			[...root.querySelectorAll("svg[width]")].flatMap(icon => {
+				let box = icon.getBoundingClientRect();
+				if (box.width === 0 && box.height === 0) return [];
+				let size = Number(icon.getAttribute("width"));
+				return Math.abs(box.width - size) > 0.5 || Math.abs(box.height - size) > 0.5
+					? [
+						`${box.width.toFixed(1)}×${box.height.toFixed(1)}, declared ${size}: ${
+							root.textContent?.slice(0, 60)
+						}`,
+					]
+					: [];
+			})
+		)
+	);
+}
+
+/** How far an icon's centre sits from the centre of its row's first text line. */
+function firstLineOffset(row: Locator) {
+	return row.evaluate(element => {
+		let icon = element.querySelector("svg")!.getBoundingClientRect();
+		let top = element.getBoundingClientRect().top;
+		let line = Number.parseFloat(getComputedStyle(element).lineHeight);
+		return Math.abs(icon.top + icon.height / 2 - (top + line / 2));
+	});
+}
+
+async function phone(page: Page) {
+	await page.setViewportSize({ width: 390, height: 844 });
+}
+
+test("icons keep their size and sit on the first line beside wrapped decision text", async ({ join, seed }) => {
+	await seed(SOURCE, STATE);
+	let page = await join("ana");
+	await phone(page);
+
+	let settled = content(page).locator("[data-card-settled]");
+	await expect(settled).toContainText(SETTLED_ANSWER);
+	expect((await settled.boundingBox())!.height).toBeGreaterThan(30);
+	expect(await squeezed(settled)).toEqual([]);
+	expect(await firstLineOffset(settled)).toBeLessThan(1.5);
+
+	await page.getByRole("button", { name: `Decision: ${CHOSEN}` }).click();
+	let dialog = page.getByRole("dialog", { name: "Decision" });
+	await expect(dialog).toContainText("Phased over a whole quarter");
+	let answers = dialog.locator(".plan-decision-answer");
+	await expect(answers).toHaveCount(3);
+	expect(await squeezed(dialog)).toEqual([]);
+	for (let answer of await answers.all()) {
+		expect(await firstLineOffset(answer)).toBeLessThan(1.5);
+	}
+	await page.keyboard.press("Escape");
+	await expect(dialog).toHaveCount(0);
+
+	await page.getByRole("button", { name: /^Decisions/ }).click();
+	let decisions = page.locator('[data-document-view="decisions"]');
+	await decisions.getByRole("button", { name: /resolved/ }).click();
+	await expect(decisions).toContainText("How should we roll this out?");
+	await expect.poll(() => squeezed(decisions)).toEqual([]);
+});
+
+test("header, menu, Chat and sidebar icons keep their size when every row wraps", async ({ join, seed }) => {
+	await seed(SOURCE, STATE);
+	let page = await join("ana");
+	await phone(page);
+
+	// Squeeze every row the way a long title or label would.
+	let narrow = (scope: Locator) =>
+		scope.evaluateAll(roots => {
+			for (let root of roots) {
+				for (let icon of root.querySelectorAll("svg[width]")) {
+					let row = icon.parentElement;
+					if (row && getComputedStyle(row).display.includes("flex")) row.style.maxWidth = "2.5rem";
+				}
+			}
+		});
+
+	let header = page.getByRole("banner");
+	await narrow(header);
+	await expect.poll(() => squeezed(header)).toEqual([]);
+
+	await page.getByRole("button", { name: /^Actions for / }).click();
+	let menu = page.getByRole("menu");
+	await expect(menu).toBeVisible();
+	await narrow(menu);
+	await expect.poll(() => squeezed(menu)).toEqual([]);
+	await page.keyboard.press("Escape");
+
+	await page.getByRole("button", { name: "Chat", exact: true }).click();
+	let chat = page.getByRole("complementary", { name: "Chat" });
+	await expect(chat.getByRole("combobox", { name: "Message" })).toBeVisible();
+	await narrow(chat);
+	await expect.poll(() => squeezed(chat)).toEqual([]);
+
+	await page.getByRole("button", { name: "Show sidebar" }).click();
+	let sidebar = page.getByRole("navigation", { name: /project|sidebar|documents/i });
+	await expect(sidebar.first()).toBeVisible();
+	await narrow(sidebar);
+	await expect.poll(() => squeezed(sidebar)).toEqual([]);
+});
diff --git a/e2e/source/icon-size.fixture.ts b/e2e/source/icon-size.fixture.ts
new file mode 100644
index 000000000..ff57d7622
--- /dev/null
+++ b/e2e/source/icon-size.fixture.ts
@@ -0,0 +1,103 @@
+/** A document whose decisions carry option labels long enough to wrap beside their icons. */
+
+import { createHash } from "node:crypto";
+
+export const PROSE = "The rollout goes team by team, starting with the documentation team.";
+export const RESOLVED = "01K0N4TR8K7JGM4R1J7PW4R8YJ";
+export const SETTLED = "01K0N4TR8K7JGM4R1J7PW4R8YK";
+const RESOLVED_QUESTION = "01K0N4V4E7Y6P4MJ5WD8XZF3B2";
+const SETTLED_QUESTION = "01K0N4V4E7Y6P4MJ5WD8XZF3B3";
+const AT = "2026-09-23T15:13:00.000Z";
+
+export const CHOSEN =
+	"Team by team, starting with the documentation team and widening after a review";
+const LABELS = [
+	"All at once",
+	CHOSEN,
+	"Phased over a whole quarter with an opt-in beta for the teams who ask first",
+];
+export const SETTLED_ANSWER =
+	"Keep room state on disk as canonical MDX beside the transcript and its sidecar";
+
+function digest(text: string): string {
+	return `sha256:${createHash("sha256").update(`${text}\n`).digest("hex")}`;
+}
+
+function optionId(question: string, index: number): string {
+	return `${question.slice(0, 22)}${question.slice(-2)}0${index}`;
+}
+
+function definition(question: string, prompt: string, labels: string[]) {
+	return {
+		questions: [{
+			id: question,
+			header: "Rollout",
+			question: prompt,
+			multiple: false,
+			options: labels.map((label, index) => ({
+				id: optionId(question, index),
+				label,
+				description: "",
+			})),
+		}],
+	};
+}
+
+const RESOLVED_CARD = `<Questionnaire id="${RESOLVED}" by="ana" at="${AT}">
+<Question id="${RESOLVED_QUESTION}" header="Rollout" prompt="How should we roll this out?" multiple="false">
+${
+	LABELS.map((label, index) =>
+		`<Option id="${optionId(RESOLVED_QUESTION, index)}" label="${label}" />`
+	).join("\n")
+}
+<Answer value="${CHOSEN}" />
+</Question>
+</Questionnaire>`;
+
+const SETTLED_CARD = `<Questionnaire id="${SETTLED}" by="ana" status="decided">
+<Question id="${SETTLED_QUESTION}" header="Storage" prompt="Where should room state live?" multiple="false">
+<Option id="${optionId(SETTLED_QUESTION, 0)}" label="${SETTLED_ANSWER}" />
+<Answer value="${SETTLED_ANSWER}" choices="${optionId(SETTLED_QUESTION, 0)}" />
+</Question>
+</Questionnaire>`;
+
+export const SOURCE = `${PROSE}\n\n${RESOLVED_CARD}\n\n${SETTLED_CARD}\n\n${
+	"Padding paragraph.\n\n".repeat(20)
+}`;
+
+export const STATE = {
+	revision: 1,
+	questions: [
+		{
+			id: RESOLVED,
+			status: "answered",
+			definition: definition(RESOLVED_QUESTION, "How should we roll this out?", LABELS),
+			answers: { [RESOLVED_QUESTION]: CHOSEN },
+			resolver: "ana",
+			at: Date.parse(AT) / 1_000,
+			anchors: {
+				widget: RESOLVED,
+				questions: {
+					[RESOLVED_QUESTION]: {
+						anchors: [{ epoch: "stale", position: "", digest: digest(PROSE) }],
+						pending: false,
+					},
+				},
+			},
+		},
+		{
+			id: SETTLED,
+			definition: definition(SETTLED_QUESTION, "Where should room state live?", [SETTLED_ANSWER]),
+			status: "answered",
+			answers: { [SETTLED_QUESTION]: SETTLED_ANSWER },
+			choices: [optionId(SETTLED_QUESTION, 0)],
+			resolver: "ana",
+			owner: "ana",
+			decidedAt: 1_790_000_000,
+			history: [],
+			optionOrigins: {},
+			editors: [],
+			origin: "conversation",
+		},
+	],
+};
diff --git a/packages/editor/src/resolved-layer.tsx b/packages/editor/src/resolved-layer.tsx
index 95c6f58ab..7d94e45b2 100644
--- a/packages/editor/src/resolved-layer.tsx
+++ b/packages/editor/src/resolved-layer.tsx
@@ -181,7 +181,7 @@ function Popover(
 				</span>
 			</div>
 			<p className="plan-decision-answer">
-				<CheckIcon aria-hidden="true" />
+				<CheckIcon aria-hidden="true" className="icon-first-line" />
 				<span>{decision.answer}</span>
 			</p>
 			{others.length > 0 && (
@@ -189,7 +189,7 @@ function Popover(
 					<div>
 						{others.map(label => (
 							<p className="plan-decision-answer" data-rejected="" key={label}>
-								<CloseIcon aria-hidden="true" />
+								<CloseIcon aria-hidden="true" className="icon-first-line" />
 								<span>{label}</span>
 							</p>
 						))}
@@ -209,7 +209,7 @@ function Popover(
 					)}
 					{decision.at && when(decision.at) && (
 						<p>
-							<ClockIcon aria-hidden="true" />
+							<ClockIcon aria-hidden="true" className="icon-first-line" />
 							<span>{when(decision.at)}</span>
 						</p>
 					)}
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
index 0d3072c8e..01ebc70c5 100644
--- a/packages/editor/src/styles.css
+++ b/packages/editor/src/styles.css
@@ -3367,10 +3367,6 @@
 	flex: none;
 }
 
-.plan-decision-meta > p > svg {
-	margin-block: calc((1lh - 0.875rem) / 2);
-}
-
 .plan-decision-meta > p > :is(img, [role="img"]) {
 	margin-block: calc((1lh - 1.125rem) / 2);
 }
diff --git a/packages/editor/src/widgets/questionnaire.tsx b/packages/editor/src/widgets/questionnaire.tsx
index bdade54b3..b2b4b4f8d 100644
--- a/packages/editor/src/widgets/questionnaire.tsx
+++ b/packages/editor/src/widgets/questionnaire.tsx
@@ -444,7 +444,7 @@ function SettledLine(
 			data-card-settled=""
 			data-plan-sidecar-questionnaire={value.id}
 		>
-			<DecisionIcon aria-hidden="true" size={14} />
+			<DecisionIcon aria-hidden="true" className="icon-first-line" size={14} />
 			<span>
 				Decided: {chosen.length ? chosen.join(", ") : "Saved decision"}
 				{owner ? ` · @${owner}` : ""}
diff --git a/packages/icons/package.json b/packages/icons/package.json
index c11775f42..2a36677d8 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -17,6 +17,9 @@
 	},
 	"devDependencies": {
 		"@types/bun": "catalog:bun",
-		"@types/react": "catalog:react"
+		"@types/react": "catalog:react",
+		"@types/react-dom": "catalog:react",
+		"react": "catalog:react",
+		"react-dom": "catalog:react"
 	}
 }
diff --git a/packages/icons/src/brand.tsx b/packages/icons/src/brand.tsx
index 685d8b0ab..b9eb14aa5 100644
--- a/packages/icons/src/brand.tsx
+++ b/packages/icons/src/brand.tsx
@@ -1,6 +1,13 @@
 export function GitHubIcon({ size = 16 }: { size?: number }) {
 	return (
-		<svg aria-hidden="true" fill="currentColor" height={size} viewBox="0 0 16 16" width={size}>
+		<svg
+			aria-hidden="true"
+			data-filled-icon=""
+			fill="currentColor"
+			height={size}
+			viewBox="0 0 16 16"
+			width={size}
+		>
 			<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
 		</svg>
 	);
diff --git a/packages/icons/src/filled.tsx b/packages/icons/src/filled.tsx
index 4172e5fb7..f615ace35 100644
--- a/packages/icons/src/filled.tsx
+++ b/packages/icons/src/filled.tsx
@@ -5,6 +5,7 @@ export function ChopinIcon({ size = 14, ...props }: IconProps) {
 	return (
 		<svg
 			aria-hidden={labelled ? undefined : true}
+			data-filled-icon=""
 			height={size}
 			viewBox="0 0 18 18"
 			width={size}
diff --git a/packages/icons/src/icon.test.tsx b/packages/icons/src/icon.test.tsx
new file mode 100644
index 000000000..2599709a3
--- /dev/null
+++ b/packages/icons/src/icon.test.tsx
@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import * as icons from "./index";
+
+// The web stylesheet holds these markers at their declared size (`flex-shrink: 0`).
+test("every icon carries a marker that keeps it from shrinking beside wrapping text", () => {
+	for (let [name, Icon] of Object.entries(icons)) {
+		let html = renderToStaticMarkup(<Icon />);
+		expect(html, name).toMatch(/^<svg[^>]* data-(nucleo|filled)-icon=""/);
+	}
+});

From 2e48fb8ed1e17a173d53e6ae43b879dd2b7fdb56 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Thu, 8 Oct 2026 09:30:50 +0100
Subject: [PATCH 2/2] Renew reviewed design hashes for icon sizing

---
 scripts/design-contract/exceptions/dynamic-editor.json   | 8 ++++----
 scripts/design-contract/exceptions/dynamic-packages.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/design-contract/exceptions/dynamic-editor.json b/scripts/design-contract/exceptions/dynamic-editor.json
index f9f676669..67aea35aa 100644
--- a/scripts/design-contract/exceptions/dynamic-editor.json
+++ b/scripts/design-contract/exceptions/dynamic-editor.json
@@ -403,7 +403,7 @@
 				1
 			]
 		],
-		"sourceHash": "d1d4af2207bbd028118c9a2869c15073c18bb46d41967111fb9be57b1a1947f7"
+		"sourceHash": "49ccb021fb60c45cdbe234241549e468ba556277d74d824145ca8707ff2bc908"
 	},
 	{
 		"file": "packages/editor/src/widgets/code-view.tsx",
@@ -466,7 +466,7 @@
 				1
 			]
 		],
-		"sourceHash": "d1d4af2207bbd028118c9a2869c15073c18bb46d41967111fb9be57b1a1947f7"
+		"sourceHash": "49ccb021fb60c45cdbe234241549e468ba556277d74d824145ca8707ff2bc908"
 	},
 	{
 		"file": "packages/editor/src/resolved-layer.tsx",
@@ -487,7 +487,7 @@
 				1
 			]
 		],
-		"sourceHash": "1267a15ad057c3d48bc475e033c5970731e97dcf8ac0baa212726b225c38e377"
+		"sourceHash": "74045d002ca932fa97d57774c0d4c4e36b19bb30daa92703a322595de22e37f5"
 	},
 	{
 		"file": "packages/editor/src/resolved-layer.tsx",
@@ -501,6 +501,6 @@
 				1
 			]
 		],
-		"sourceHash": "1267a15ad057c3d48bc475e033c5970731e97dcf8ac0baa212726b225c38e377"
+		"sourceHash": "74045d002ca932fa97d57774c0d4c4e36b19bb30daa92703a322595de22e37f5"
 	}
 ]
diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index 8050eeb51..e85e4153a 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -746,6 +746,6 @@
 				1
 			]
 		],
-		"sourceHash": "b6454ae171e15bf7a00d5cfc6ca34141ea34f87484d16dead55c6ae9dfc3ea09"
+		"sourceHash": "5c9709fd97d4f6777205da118ce8b24123537b0ae7e56d3fa4490db8538081bf"
 	}
 ]