From 85d5fb548093bc26335b9f7f3bb48bdf2cc1b258 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 07:18:02 +0100
Subject: [PATCH 1/6] Fold the phone chat composer into one pill

On a coarse-pointer phone the composer rested at about 125px plus a status
tab, leaving roughly 80px of transcript above the keyboard. It now rests as
one 44px pill: reference button, auto-growing draft and a 36px send circle,
with the mode switch icon-only and connection state as a slim row inside it.
"Chopin unavailable" is a quiet line above the pill. Mention, reference and
command pickers become a full-width list resting on the composer with 44px
rows. Chat prose uses the document's body size on phones and code wraps.
Desktop layout is unchanged.

Why: apps/web/src/chat/composer.css | the phone connection status stays mounted out of flow so its live region still hears its first word
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/chat.tsx             |  45 ++++---
 apps/web/src/chat/composer.css         | 155 +++++++++++++++++++++++
 apps/web/src/chat/markdown.css         |  13 ++
 apps/web/src/chat/mention-picker.tsx   |   4 -
 apps/web/src/chat/reference-picker.tsx |   1 -
 e2e/chat-composer.e2e.ts               |   5 +-
 e2e/chat-phone.e2e.ts                  | 164 +++++++++++++++++++++++++
 packages/visuals/theme.css             |   4 +
 8 files changed, 365 insertions(+), 26 deletions(-)
 create mode 100644 e2e/chat-phone.e2e.ts

diff --git a/apps/web/src/chat/chat.tsx b/apps/web/src/chat/chat.tsx
index 8b9d0fbb3..b2e13b24d 100644
--- a/apps/web/src/chat/chat.tsx
+++ b/apps/web/src/chat/chat.tsx
@@ -683,7 +683,11 @@ export function Chat(
 				</div>
 			)}
 
-			<div ref={composerRoot} className="chat-composer relative shrink-0 px-2.5 pb-2.5">
+			<div
+				ref={composerRoot}
+				className="chat-composer relative shrink-0 px-2.5 pb-2.5"
+				data-planner={agent ? undefined : "off"}
+			>
 				{referencesEnabled && (
 					<p className="sr-only" id={instructionsId}>
 						Type # to reference a document.
@@ -981,27 +985,30 @@ export function Chat(
 										)}
 									</div>
 									<div className="composer-actions">
-										{/* Always mounted, so the live region hears its first word. */}
-										<span className="composer-connection" id={connectionId} role="status">
-											{connectionLabel && (
-												<span
-													className="composer-connection-label"
-													data-offline={connectionLabel === "Offline" || undefined}
+										{/* A row of its own on a phone; see composer.css. */}
+										<span className="composer-connection-group">
+											{/* Always mounted, so the live region hears its first word. */}
+											<span className="composer-connection" id={connectionId} role="status">
+												{connectionLabel && (
+													<span
+														className="composer-connection-label"
+														data-offline={connectionLabel === "Offline" || undefined}
+													>
+														{connectionLabel}
+													</span>
+												)}
+											</span>
+											{/* Where the document header is out of view; see composer.css. */}
+											{connectionNotice === "offline" && wire && (
+												<button
+													className="composer-reconnect btn btn-sm btn-ghost"
+													onClick={() => wire.reconnect()}
+													type="button"
 												>
-													{connectionLabel}
-												</span>
+													Reconnect
+												</button>
 											)}
 										</span>
-										{/* Where the document header is out of view; see composer.css. */}
-										{connectionNotice === "offline" && wire && (
-											<button
-												className="composer-reconnect btn btn-sm btn-ghost"
-												onClick={() => wire.reconnect()}
-												type="button"
-											>
-												Reconnect
-											</button>
-										)}
 										<span className="composer-run-control">
 											{agent && (busy || counts.active > 0) && (
 												<button
diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index c0fd3d70d..823519950 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -151,6 +151,11 @@
 }
 .chat-composer [data-chat-reference-picker] {
 	right: calc(-1 * var(--edge-width));
+	max-height: min(16rem, 45dvh, 45vh);
+}
+/* At most eight rows show before the list scrolls: 8 × 2rem plus the 0.25rem padding. */
+.chat-composer [data-chat-mention-picker] {
+	max-height: min(16.5rem, 45dvh, 45vh);
 }
 .chat-composer [data-chat-reference-picker] [role="option"] {
 	height: 2rem;
@@ -230,6 +235,9 @@
 	display: inline-flex;
 	min-width: 0;
 }
+.chat-composer .composer-connection-group {
+	display: contents;
+}
 .chat-composer .composer-connection-label {
 	display: inline-flex;
 	align-items: center;
@@ -272,3 +280,150 @@
 [data-workspace-mode="split"] .chat-composer .composer-reconnect {
 	display: none;
 }
+
+/*
+ * Phones: one pill. The draft sits between a leading reference button and a
+ * trailing mode switch and send, so the composer rests at one line and the
+ * transcript keeps the space above the keyboard. Every phone-only rule lives
+ * in this block, behind this one condition.
+ */
+@media (pointer: coarse) and (max-width: 600px) {
+	.chat-composer {
+		padding-inline: 0.5rem;
+		/* The home indicator's inset, but not while the keyboard covers it. */
+		padding-bottom: max(0.5rem, calc(env(safe-area-inset-bottom) - var(--keyboard-inset, 0px)));
+	}
+	.chat-composer .composer-surface {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		padding: 0.25rem;
+		border-radius: var(--radius-composer-pill);
+	}
+	.chat-composer :is(.composer-footer, .composer-left, .composer-actions) {
+		display: contents;
+	}
+	.chat-composer .composer-draft-input {
+		order: 2;
+		flex: 1 1 0;
+		min-width: 0;
+		/* One line at rest; five before it scrolls, fewer above an open keyboard. */
+		min-height: var(--composer-pill-control);
+		max-height: min(calc(5lh + 0.75rem), calc(var(--app-height, 100dvh) * 0.3));
+		padding: 0.375rem 0.5rem;
+		/* theme.css keeps touch text at 16px or more, so focus never zooms. */
+		line-height: 1.5;
+	}
+	/* A narrow pill shortens the hint rather than wrapping it out of view. */
+	.chat-composer .composer-draft-input[data-empty]::before {
+		inset-inline: 0.5rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.chat-composer .composer-left > button {
+		order: 1;
+	}
+	.chat-composer .composer-mode-trigger {
+		order: 3;
+	}
+	.chat-composer .composer-run-control {
+		order: 4;
+	}
+	.chat-composer .composer-run-control:empty {
+		display: none;
+	}
+	.chat-composer .send-action {
+		order: 5;
+	}
+	/* Without the Planner the switch can never be used; the line above says why. */
+	.chat-composer[data-planner="off"] .composer-mode-trigger {
+		display: none;
+	}
+	:root[data-plan-coarse-pointer] .chat-composer .composer-surface button:not([role="option"]) {
+		min-width: var(--composer-pill-control);
+		min-height: var(--composer-pill-control);
+	}
+	.chat-composer .composer-surface :is(.btn-icon, .composer-mode) {
+		width: var(--composer-pill-control);
+		height: var(--composer-pill-control);
+		border-radius: var(--radius-full);
+	}
+	.chat-composer .composer-surface :is(.btn-icon, .composer-mode-symbol) svg {
+		width: var(--composer-pill-icon);
+		height: var(--composer-pill-icon);
+	}
+	/* The switch keeps its accessible name and drops the visible word. */
+	.chat-composer .composer-mode {
+		column-gap: 0;
+		padding-inline: calc((var(--composer-pill-control) - var(--composer-pill-icon)) / 2);
+	}
+	.chat-composer .composer-mode-label {
+		width: 0;
+		overflow: hidden;
+		opacity: 0;
+	}
+	.chat-composer .send-action:disabled {
+		background-color: var(--color-gray-200);
+		color: var(--color-text-tertiary);
+		box-shadow: none;
+		opacity: 1;
+	}
+	/* Connection state becomes a slim first row inside the pill. */
+	.chat-composer .composer-connection-group:has(.composer-connection-label) {
+		display: flex;
+		order: 0;
+		flex-basis: 100%;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.125rem 0.25rem 0 0.5rem;
+	}
+	.chat-composer
+		.composer-connection-group:not(:has(.composer-connection-label))
+		.composer-connection {
+		position: absolute;
+	}
+	.chat-composer .composer-connection-group .composer-reconnect {
+		min-height: var(--control-height-compact);
+	}
+	/* Status above the pill is one quiet line rather than a tab behind it. */
+	.chat-composer .composer-notice {
+		min-height: 0;
+		margin-bottom: 0;
+		padding: 0.25rem 0.75rem 0.375rem;
+		border-radius: var(--radius-md);
+		background: transparent;
+		font-size: var(--text-xs);
+		line-height: var(--text-xs--line-height);
+	}
+	.chat-composer .composer-notice[data-error] {
+		margin-bottom: 0.375rem;
+		background: var(--color-danger-surface);
+	}
+	.chat-composer .composer-unavailable {
+		flex-basis: 100%;
+		min-height: 0;
+	}
+	/* Pickers become a list resting on the composer, as wide as it is. */
+	.chat-composer
+		:is([data-chat-reference-picker], [data-chat-mention-picker], [data-chat-command-picker]) {
+		left: 0;
+		right: 0;
+		width: auto;
+		min-width: 0;
+		max-width: none;
+		max-height: calc(var(--app-height, 100dvh) * 0.4);
+		margin-bottom: 0.375rem;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		border-radius: var(--radius-lg);
+	}
+	.chat-composer
+		:is([data-chat-reference-picker], [data-chat-mention-picker], [data-chat-command-picker])
+		[role="option"] {
+		height: auto;
+		min-height: var(--control-target-coarse);
+		font-size: var(--text-base);
+	}
+}
diff --git a/apps/web/src/chat/markdown.css b/apps/web/src/chat/markdown.css
index 3a4a083f3..802d956d8 100644
--- a/apps/web/src/chat/markdown.css
+++ b/apps/web/src/chat/markdown.css
@@ -93,3 +93,16 @@
 .chat-markdown[data-chat-mention-lead] > p:first-of-type {
 	display: inline;
 }
+
+/* Phones read Chat at the document's prose size, and a code block wraps rather than scrolling sideways. */
+@media (pointer: coarse) and (max-width: 600px) {
+	.chat-markdown {
+		font-size: var(--text-base);
+		line-height: var(--text-base--line-height);
+	}
+
+	.chat-markdown pre {
+		overflow-x: visible;
+		white-space: pre-wrap;
+	}
+}
diff --git a/apps/web/src/chat/mention-picker.tsx b/apps/web/src/chat/mention-picker.tsx
index 595de0f13..a7a86fe7c 100644
--- a/apps/web/src/chat/mention-picker.tsx
+++ b/apps/web/src/chat/mention-picker.tsx
@@ -5,9 +5,6 @@ import { referenceOptionId } from "./reference-picker";
 
 import type { MentionCandidate } from "./mentions";
 
-/** At most this many rows show before the list scrolls: 8 × 2rem plus the 0.25rem padding. */
-const LIST_HEIGHT = "16.5rem";
-
 export function MentionPicker(
 	{
 		active,
@@ -36,7 +33,6 @@ export function MentionPicker(
 			data-chat-mention-picker=""
 			data-menu-enter=""
 			data-focus-boundary=""
-			style={{ maxHeight: `min(${LIST_HEIGHT}, 45dvh, 45vh)` }}
 		>
 			<div aria-label="Mentions" id={id} role="listbox">
 				{options.map((option, index) => (
diff --git a/apps/web/src/chat/reference-picker.tsx b/apps/web/src/chat/reference-picker.tsx
index 49befb0b0..024030372 100644
--- a/apps/web/src/chat/reference-picker.tsx
+++ b/apps/web/src/chat/reference-picker.tsx
@@ -247,7 +247,6 @@ export function ReferencePicker(
 			data-animate={animate || undefined}
 			data-menu-enter=""
 			data-focus-boundary=""
-			style={{ maxHeight: "min(16rem, 45dvh, 45vh)" }}
 		>
 			<div aria-busy={state.status === "loading"} aria-label={label} id={id} role="listbox">
 				{state.status === "loading" && (
diff --git a/e2e/chat-composer.e2e.ts b/e2e/chat-composer.e2e.ts
index ce640358e..c5189dbfb 100644
--- a/e2e/chat-composer.e2e.ts
+++ b/e2e/chat-composer.e2e.ts
@@ -21,7 +21,7 @@ test("touch chat input stays at least 16px to avoid focus zoom", async ({ join }
 });
 
 for (let touch of [false, true]) {
-	test(`chat input rests at two lines and grows to its cap on ${touch ? "touch" : "desktop"}`, async ({ join }) => {
+	test(`chat input rests at ${touch ? "one line" : "two lines"} and grows to its cap on ${touch ? "a touch phone" : "desktop"}`, async ({ join }) => {
 		let page = await join("ana", {
 			hasTouch: touch,
 			viewport: touch ? { width: 390, height: 844 } : { width: 1440, height: 900 },
@@ -41,7 +41,8 @@ for (let touch of [false, true]) {
 				maximum: parseFloat(style.maxHeight),
 			};
 		});
-		expect(initial.height).toBeCloseTo(initial.padding + 2 * initial.line, 0);
+		// A phone's pill composer rests at one line; desktop keeps room for two.
+		expect(initial.height).toBeCloseTo(initial.padding + (touch ? 1 : 2) * initial.line, 0);
 		await fillChat(input, "One\nTwo\nThree\nFour");
 		await expect.poll(() => input.evaluate(element => element.getBoundingClientRect().height))
 			.toBeGreaterThan(initial.height);
diff --git a/e2e/chat-phone.e2e.ts b/e2e/chat-phone.e2e.ts
new file mode 100644
index 000000000..755d5edb4
--- /dev/null
+++ b/e2e/chat-phone.e2e.ts
@@ -0,0 +1,164 @@
+import { chatInput } from "./chat-input";
+import { expectInsideViewport, expectNoHorizontalOverflow } from "./responsive";
+import { expect, openIsolatedRoom, test } from "./room";
+import { installVisualViewport, setVisualViewport } from "./visual-viewport";
+
+import type { Page } from "@playwright/test";
+
+const PHONE = { hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } };
+
+function chatPane(page: Page) {
+	return page.getByRole("complementary", { includeHidden: true, name: "Chat" });
+}
+
+async function openPhoneChat(page: Page): Promise<void> {
+	await page.getByRole("navigation", { name: "Workspace view" })
+		.getByRole("button", { name: /^Chat/ }).click();
+	await expect(chatInput(chatPane(page))).toBeVisible();
+}
+
+/** From the top of the pill to the bottom of the composer, leaving out the status line above it. */
+function pillHeight(page: Page): Promise<number> {
+	return chatPane(page).locator(".chat-composer").evaluate(composer => {
+		let surface = composer.querySelector(".composer-surface")!.getBoundingClientRect();
+		return composer.getBoundingClientRect().bottom - surface.top;
+	});
+}
+
+test("a phone composer rests as one pill with a reference button, draft and send", async ({ join }) => {
+	let page = await join("ana", PHONE);
+	await openPhoneChat(page);
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	let send = chat.getByRole("button", { name: "Send message" });
+	let reference = chat.getByRole("button", { name: "Mention docs" });
+
+	expect(await pillHeight(page)).toBeLessThanOrEqual(64);
+	let [draftBox, sendBox, referenceBox] = await Promise.all([
+		draft.boundingBox(),
+		send.boundingBox(),
+		reference.boundingBox(),
+	]);
+	// One row: the reference button leads, the send button trails the draft.
+	expect(referenceBox!.x + referenceBox!.width).toBeLessThanOrEqual(draftBox!.x + 1);
+	expect(sendBox!.x).toBeGreaterThanOrEqual(draftBox!.x + draftBox!.width - 1);
+	expect(Math.abs(sendBox!.y + sendBox!.height - (draftBox!.y + draftBox!.height)))
+		.toBeLessThanOrEqual(1);
+	expect(sendBox!.width).toBeCloseTo(36, 0);
+	expect(sendBox!.height).toBeCloseTo(36, 0);
+	// The status stays readable as one line above the pill.
+	let notice = chat.getByRole("status").filter({ hasText: "Chopin unavailable" });
+	await expect(notice).toBeVisible();
+	expect((await notice.boundingBox())!.height).toBeLessThanOrEqual(28);
+	// Disabled send is drawn solid rather than faded.
+	await expect(send).toBeDisabled();
+	expect(await send.evaluate(element => getComputedStyle(element).opacity)).toBe("1");
+
+	await draft.click();
+	await page.keyboard.type("One more line to send");
+	await expect(send).toBeEnabled();
+	await expectNoHorizontalOverflow(page);
+});
+
+test("phone mention and reference pickers rest on the composer as a full-width list", async ({ join }) => {
+	let page = await join("ana", PHONE);
+	await join("cy");
+	await expect(page.getByRole("group", { name: /People here: ana, cy$/ })).toBeVisible();
+	await openPhoneChat(page);
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	let surface = chat.locator(".composer-surface");
+
+	await draft.click();
+	await page.keyboard.type("@");
+	let mentions = chat.locator("[data-chat-mention-picker]");
+	await expect(mentions.getByRole("option", { name: "cy" })).toBeVisible();
+	let [list, pill] = await Promise.all([mentions.boundingBox(), surface.boundingBox()]);
+	expect(Math.abs(list!.x - pill!.x)).toBeLessThanOrEqual(1);
+	expect(Math.abs(list!.width - pill!.width)).toBeLessThanOrEqual(1);
+	expect(list!.y + list!.height).toBeLessThanOrEqual(pill!.y);
+	expect(pill!.y - (list!.y + list!.height)).toBeLessThanOrEqual(8);
+	let row = await mentions.getByRole("option", { name: "cy" }).boundingBox();
+	expect(row!.height).toBeGreaterThanOrEqual(44);
+	expect(await mentions.evaluate(element => getComputedStyle(element).overscrollBehaviorY))
+		.toBe("contain");
+
+	await page.keyboard.press("Backspace");
+	await page.keyboard.type("#");
+	let references = chat.locator("[data-chat-reference-picker]");
+	await expect(references).toBeVisible();
+	let referenceList = await references.boundingBox();
+	expect(Math.abs(referenceList!.width - pill!.width)).toBeLessThanOrEqual(1);
+	expect(referenceList!.height).toBeLessThanOrEqual(844 * 0.4 + 1);
+});
+
+test("an open keyboard leaves the phone transcript most of the exposed height", async ({ baseURL, browser, room }) => {
+	let emulation = await openIsolatedRoom(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		context =>
+			installVisualViewport(context, {
+				height: 844,
+				offsetLeft: 0,
+				offsetTop: 0,
+				pageLeft: 0,
+				pageTop: 0,
+				scale: 1,
+				width: 390,
+			}),
+	);
+	try {
+		let page = emulation.page;
+		await openPhoneChat(page);
+		let chat = chatPane(page);
+		let draft = chatInput(chat);
+		await draft.click();
+		await setVisualViewport(page, { event: "resize", height: 508 });
+		await page.keyboard.type(
+			"A draft long enough to wrap onto a second line in the phone composer pill",
+		);
+		let send = chat.getByRole("button", { name: "Send message" });
+		await expectInsideViewport(draft);
+		await expectInsideViewport(send);
+		let transcript = await chat.locator(".chat-composer").evaluate(composer => {
+			let pane = composer.parentElement!.getBoundingClientRect();
+			return composer.getBoundingClientRect().top - pane.top;
+		});
+		// The composer sits on the keyboard and the transcript keeps the rest.
+		expect((await send.boundingBox())!.y + 36).toBeGreaterThan(508 - 64);
+		expect(transcript).toBeGreaterThanOrEqual(200);
+	} finally {
+		await emulation.close();
+	}
+});
+
+test("the desktop composer keeps its labelled mode switch, footer and dropdown pickers", async ({ join }) => {
+	let page = await join("ana", { viewport: { width: 1440, height: 900 } });
+	await join("cy");
+	let chat = chatPane(page);
+	let draft = chatInput(chat);
+	await expect(draft).toBeVisible();
+	await expect(chat.locator(".composer-mode-label")).toHaveText("Chat");
+	expect(
+		await chat.locator(".composer-surface").evaluate(element => getComputedStyle(element).display),
+	)
+		.not.toBe("flex");
+	let [draftBox, sendBox] = await Promise.all([
+		draft.boundingBox(),
+		chat.getByRole("button", { name: "Send message" }).boundingBox(),
+	]);
+	expect(sendBox!.y).toBeGreaterThanOrEqual(draftBox!.y + draftBox!.height - 1);
+
+	await draft.click();
+	await page.keyboard.type("@");
+	let mentions = chat.locator("[data-chat-mention-picker]");
+	await expect(mentions.getByRole("option", { name: "cy" })).toBeVisible();
+	let [list, pill] = await Promise.all([
+		mentions.boundingBox(),
+		chat.locator(".composer-surface").boundingBox(),
+	]);
+	expect(list!.width).toBeLessThan(pill!.width / 2);
+});
diff --git a/packages/visuals/theme.css b/packages/visuals/theme.css
index 7aaffc850..49335321b 100644
--- a/packages/visuals/theme.css
+++ b/packages/visuals/theme.css
@@ -215,6 +215,9 @@
 		(var(--icon-button-size-compact) - var(--icon-size-compact)) / 2
 	);
 	--count-control-size: calc(var(--spacing) * 4.5);
+	/* The phone composer pill: its 36px controls, their icons, and its 44px resting height. */
+	--composer-pill-control: calc(var(--spacing) * 9);
+	--composer-pill-icon: calc(var(--spacing) * 4.5);
 	--count-control-padding: calc(var(--spacing) / 4);
 	--menu-item-height-normal: calc(var(--spacing) * 8.5);
 	--menu-item-height-compact: calc(var(--spacing) * 7);
@@ -264,6 +267,7 @@
 	--radius-lg: 0.5rem; /* 8px — popovers and panels */
 	--radius-xl: 0.625rem; /* 10px — the document page */
 	--radius-full: 9999px; /* saturated pill rounding */
+	--radius-composer-pill: calc(var(--spacing) * 5.5); /* 22px — half the phone composer at rest */
 
 	/*
 	 * Warm-tinted depth, copied from the settled Figma shadow table.

From c822f527426268c6523093ac1ab65a82aa41a7da Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 07:34:18 +0100
Subject: [PATCH 2/6] Measure the phone picker after its entrance settles

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 e2e/chat-phone.e2e.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/e2e/chat-phone.e2e.ts b/e2e/chat-phone.e2e.ts
index 755d5edb4..7858d47db 100644
--- a/e2e/chat-phone.e2e.ts
+++ b/e2e/chat-phone.e2e.ts
@@ -73,11 +73,14 @@ test("phone mention and reference pickers rest on the composer as a full-width l
 	await page.keyboard.type("@");
 	let mentions = chat.locator("[data-chat-mention-picker]");
 	await expect(mentions.getByRole("option", { name: "cy" })).toBeVisible();
-	let [list, pill] = await Promise.all([mentions.boundingBox(), surface.boundingBox()]);
-	expect(Math.abs(list!.x - pill!.x)).toBeLessThanOrEqual(1);
-	expect(Math.abs(list!.width - pill!.width)).toBeLessThanOrEqual(1);
-	expect(list!.y + list!.height).toBeLessThanOrEqual(pill!.y);
-	expect(pill!.y - (list!.y + list!.height)).toBeLessThanOrEqual(8);
+	let pill = (await surface.boundingBox())!;
+	// The list scales in from the menu entrance; measure once it has settled.
+	await expect.poll(async () => Math.abs((await mentions.boundingBox())!.width - pill.width))
+		.toBeLessThanOrEqual(1);
+	let list = (await mentions.boundingBox())!;
+	expect(Math.abs(list.x - pill.x)).toBeLessThanOrEqual(1);
+	expect(list.y + list.height).toBeLessThanOrEqual(pill.y);
+	expect(pill.y - (list.y + list.height)).toBeLessThanOrEqual(8);
 	let row = await mentions.getByRole("option", { name: "cy" }).boundingBox();
 	expect(row!.height).toBeGreaterThanOrEqual(44);
 	expect(await mentions.evaluate(element => getComputedStyle(element).overscrollBehaviorY))
@@ -87,9 +90,9 @@ test("phone mention and reference pickers rest on the composer as a full-width l
 	await page.keyboard.type("#");
 	let references = chat.locator("[data-chat-reference-picker]");
 	await expect(references).toBeVisible();
-	let referenceList = await references.boundingBox();
-	expect(Math.abs(referenceList!.width - pill!.width)).toBeLessThanOrEqual(1);
-	expect(referenceList!.height).toBeLessThanOrEqual(844 * 0.4 + 1);
+	await expect.poll(async () => Math.abs((await references.boundingBox())!.width - pill.width))
+		.toBeLessThanOrEqual(1);
+	expect((await references.boundingBox())!.height).toBeLessThanOrEqual(844 * 0.4 + 1);
 });
 
 test("an open keyboard leaves the phone transcript most of the exposed height", async ({ baseURL, browser, room }) => {

From b78d2a9190554c28d0d4b6bf0e7031fd781743fa Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 07:50:03 +0100
Subject: [PATCH 3/6] Align the phone picker list with the pill's border

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/composer.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index 823519950..9c0326bad 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -408,8 +408,9 @@
 	/* Pickers become a list resting on the composer, as wide as it is. */
 	.chat-composer
 		:is([data-chat-reference-picker], [data-chat-mention-picker], [data-chat-command-picker]) {
-		left: 0;
-		right: 0;
+		/* Out to the pill's border, as the desktop dropdowns align. */
+		left: calc(-1 * var(--edge-width));
+		right: calc(-1 * var(--edge-width));
 		width: auto;
 		min-width: 0;
 		max-width: none;

From 190a1e232f97dcd88567cd9bffbf04ddfea52236 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 08:03:33 +0100
Subject: [PATCH 4/6] Measure picker row height by layout, not its scaled box

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 e2e/chat-phone.e2e.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/e2e/chat-phone.e2e.ts b/e2e/chat-phone.e2e.ts
index 7858d47db..0c3bed3e2 100644
--- a/e2e/chat-phone.e2e.ts
+++ b/e2e/chat-phone.e2e.ts
@@ -81,8 +81,13 @@ test("phone mention and reference pickers rest on the composer as a full-width l
 	expect(Math.abs(list.x - pill.x)).toBeLessThanOrEqual(1);
 	expect(list.y + list.height).toBeLessThanOrEqual(pill.y);
 	expect(pill.y - (list.y + list.height)).toBeLessThanOrEqual(8);
-	let row = await mentions.getByRole("option", { name: "cy" }).boundingBox();
-	expect(row!.height).toBeGreaterThanOrEqual(44);
+	// Layout height: the entrance's scale can leave the drawn box a hair short.
+	expect(
+		await mentions.getByRole("option", { name: "cy" }).evaluate(row =>
+			(row as HTMLElement).offsetHeight
+		),
+	)
+		.toBeGreaterThanOrEqual(44);
 	expect(await mentions.evaluate(element => getComputedStyle(element).overscrollBehaviorY))
 		.toBe("contain");
 

From 87badf392f75e7c53a1278dee8d67d72ffa326e0 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 08:18:46 +0100
Subject: [PATCH 5/6] Address review: send spacing, pinned transcript test,
 landscape phones

Space the send circle so the mode switch keeps its own 44px target, draw
disabled send without an outline on an inset tone, hug the pill with its
focus edge, and apply the phone composer to coarse landscape phones too.
Add an e2e check that a transcript at the bottom stays pinned when a
message arrives with the keyboard open.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/composer.css | 15 +++++++++--
 apps/web/src/chat/markdown.css |  2 +-
 e2e/chat-phone.e2e.ts          | 48 ++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index 9c0326bad..ff4904b11 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -287,7 +287,8 @@
  * transcript keeps the space above the keyboard. Every phone-only rule lives
  * in this block, behind this one condition.
  */
-@media (pointer: coarse) and (max-width: 600px) {
+/* Landscape phones too; the shared `:root[data-phone]` hook can replace this condition. */
+@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
 	.chat-composer {
 		padding-inline: 0.5rem;
 		/* The home indicator's inset, but not while the keyboard covers it. */
@@ -333,8 +334,10 @@
 	.chat-composer .composer-run-control:empty {
 		display: none;
 	}
+	/* Room enough that the mode switch and send keep separate 44px targets. */
 	.chat-composer .send-action {
 		order: 5;
+		margin-inline-start: calc(var(--spacing) * 2);
 	}
 	/* Without the Planner the switch can never be used; the line above says why. */
 	.chat-composer[data-planner="off"] .composer-mode-trigger {
@@ -364,11 +367,19 @@
 		opacity: 0;
 	}
 	.chat-composer .send-action:disabled {
-		background-color: var(--color-gray-200);
+		background-color: var(--color-inset);
 		color: var(--color-text-tertiary);
 		box-shadow: none;
+		outline: none;
 		opacity: 1;
 	}
+	/*
+	 * Focus is a petrol edge on the pill itself rather than an offset ring.
+	 * Soft keyboards send keydown too, so this cannot depend on input modality.
+	 */
+	.chat-composer .composer-surface.field:focus-within {
+		outline-offset: calc(-1 * var(--edge-width));
+	}
 	/* Connection state becomes a slim first row inside the pill. */
 	.chat-composer .composer-connection-group:has(.composer-connection-label) {
 		display: flex;
diff --git a/apps/web/src/chat/markdown.css b/apps/web/src/chat/markdown.css
index 802d956d8..a2839539f 100644
--- a/apps/web/src/chat/markdown.css
+++ b/apps/web/src/chat/markdown.css
@@ -95,7 +95,7 @@
 }
 
 /* Phones read Chat at the document's prose size, and a code block wraps rather than scrolling sideways. */
-@media (pointer: coarse) and (max-width: 600px) {
+@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
 	.chat-markdown {
 		font-size: var(--text-base);
 		line-height: var(--text-base--line-height);
diff --git a/e2e/chat-phone.e2e.ts b/e2e/chat-phone.e2e.ts
index 0c3bed3e2..825acc2fa 100644
--- a/e2e/chat-phone.e2e.ts
+++ b/e2e/chat-phone.e2e.ts
@@ -143,6 +143,54 @@ test("an open keyboard leaves the phone transcript most of the exposed height",
 	}
 });
 
+test("a phone transcript at the bottom stays pinned when a message arrives with the keyboard open", async ({ baseURL, browser, join, room }) => {
+	let cy = await join("cy", { viewport: { width: 1440, height: 900 } });
+	let cyChat = chatPane(cy);
+	let cyDraft = chatInput(cyChat);
+	for (let index = 1; index <= 12; index++) {
+		await cyDraft.fill(`Earlier message ${index} long enough to take a line or two on a phone`);
+		await cyChat.getByRole("button", { name: "Send message" }).click();
+		await expect(cyChat.getByText(`Earlier message ${index} `)).toBeVisible();
+	}
+	let emulation = await openIsolatedRoom(
+		browser,
+		baseURL!,
+		room,
+		"ana",
+		PHONE,
+		context =>
+			installVisualViewport(context, {
+				height: 844,
+				offsetLeft: 0,
+				offsetTop: 0,
+				pageLeft: 0,
+				pageTop: 0,
+				scale: 1,
+				width: 390,
+			}),
+	);
+	try {
+		let page = emulation.page;
+		await openPhoneChat(page);
+		let chat = chatPane(page);
+		await chatInput(chat).click();
+		await setVisualViewport(page, { event: "resize", height: 508 });
+		await page.keyboard.type("Typing while cy talks");
+
+		await cyDraft.fill("The newest message from cy");
+		await cyChat.getByRole("button", { name: "Send message" }).click();
+		let newest = chat.getByText("The newest message from cy");
+		await expect(newest).toBeVisible();
+		let composer = chat.locator(".chat-composer");
+		await expect.poll(async () => {
+			let [message, below] = await Promise.all([newest.boundingBox(), composer.boundingBox()]);
+			return message!.y + message!.height <= below!.y && message!.y >= 0;
+		}).toBe(true);
+	} finally {
+		await emulation.close();
+	}
+});
+
 test("the desktop composer keeps its labelled mode switch, footer and dropdown pickers", async ({ join }) => {
 	let page = await join("ana", { viewport: { width: 1440, height: 900 } });
 	await join("cy");

From d3b71ff5cbad35fee700328d9cffffad7c43752a Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 08:32:45 +0100
Subject: [PATCH 6/6] Keep the phone composer's focus ring in the theme

The focus test reserves outline geometry for theme.css, so the pill keeps
the shared ring. The disabled send hides its edge by colour instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/chat/composer.css | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
index ff4904b11..94b4aa178 100644
--- a/apps/web/src/chat/composer.css
+++ b/apps/web/src/chat/composer.css
@@ -370,16 +370,10 @@
 		background-color: var(--color-inset);
 		color: var(--color-text-tertiary);
 		box-shadow: none;
-		outline: none;
+		/* The primary edge would ring a control that cannot be focused while disabled. */
+		outline-color: var(--color-inset);
 		opacity: 1;
 	}
-	/*
-	 * Focus is a petrol edge on the pill itself rather than an offset ring.
-	 * Soft keyboards send keydown too, so this cannot depend on input modality.
-	 */
-	.chat-composer .composer-surface.field:focus-within {
-		outline-offset: calc(-1 * var(--edge-width));
-	}
 	/* Connection state becomes a slim first row inside the pill. */
 	.chat-composer .composer-connection-group:has(.composer-connection-label) {
 		display: flex;