@remit/ui 0.0.161 → 0.0.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.161",
+  "version": "0.0.163",
   "type": "module",
   "files": [
     "src"

package/src/components/agenda-flow.reach.test.ts

@@ -0,0 +1,382 @@
+/**
+ * Who reaches the end of the strip.
+ *
+ * A sparse diary draws shorter than the distance either end is fetched at, so
+ * an end measured off the content alone is reached on the first layout pass and
+ * stays reached however many days arrive. That is how a two-event calendar
+ * walked its range out to 2032 and took the address with it: every prepend took
+ * the scroll offset back, every take-back raised a scroll event, and every
+ * scroll event asked for another fortnight at both ends.
+ *
+ * So reaching an end is something a reader does. The claims here are about who
+ * moved the strip — a mount, a resize and a font swap all move it and none of
+ * them may fetch — and they are asserted against a stubbed layout, because
+ * jsdom has none of its own and the bug lives entirely in the numbers.
+ */
+
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { buildCalendarDay } from "../lib/agenda-time.js";
+import { AgendaFlow, type AgendaFlowProps } from "./agenda-flow.js";
+import type {
+	CalendarDescriptor,
+	CalendarEventData,
+} from "./calendar-types.js";
+
+const TODAY = "2026-06-10";
+const OFFSET = "+02:00";
+
+const dates = [TODAY, "2026-06-11", "2026-06-12", "2026-06-13", "2026-06-14"];
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-3",
+	},
+];
+
+/** One booking a day, so every day keeps a row of its own to anchor against. */
+const event = (date: string): CalendarEventData => ({
+	id: `evt_${date}`,
+	calendarId: "c1",
+	title: `Standup ${date}`,
+	start: `${date}T10:00:00${OFFSET}`,
+	end: `${date}T10:30:00${OFFSET}`,
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: "Europe/Amsterdam",
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+});
+
+const days = dates.map((date) => buildCalendarDay(date, [event(date)], TODAY));
+
+let container: HTMLElement;
+let root: Root;
+let reachedStart: number;
+let reachedEnd: number;
+let visited: string[];
+
+/**
+ * A gesture goes stale, so the wall clock is one of the strip's inputs and the
+ * cases that turn on it hold it themselves.
+ */
+const realNow = Date.now;
+let clock = 0;
+const advance = (ms: number) => {
+	clock += ms;
+};
+
+beforeEach(() => {
+	clock = 1_700_000_000_000;
+	Date.now = () => clock;
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	reachedStart = 0;
+	reachedEnd = 0;
+	visited = [];
+});
+
+afterEach(() => {
+	act(() => root.unmount());
+	container.remove();
+	Date.now = realNow;
+});
+
+const props = (extra: Partial<AgendaFlowProps> = {}): AgendaFlowProps => ({
+	days,
+	calendars,
+	density: "pills",
+	today: TODAY,
+	focusDate: TODAY,
+	selectedEventId: "",
+	onSelectEvent: () => {},
+	onPickSlot: () => {},
+	onZoomDay: () => {},
+	onReachStart: () => {
+		reachedStart += 1;
+	},
+	onReachEnd: () => {
+		reachedEnd += 1;
+	},
+	onVisibleDayChange: (date) => {
+		visited.push(date);
+	},
+	...extra,
+});
+
+const render = (extra: Partial<AgendaFlowProps> = {}) => {
+	act(() => root.render(createElement(AgendaFlow, props(extra))));
+};
+
+/**
+ * jsdom has no layout, so the strip is given one. `scrollTop` clamps the way a
+ * browser's does, which is what makes a pane taller than its content — the
+ * whole of the bug — reproducible here.
+ */
+interface Strip {
+	element: HTMLElement;
+	/** An input the reader made on the strip, whatever kind it was. */
+	input: (event: Event) => void;
+	/** Where the strip ended up, and the event the browser raises to say so. */
+	moveTo: (top: number) => void;
+	/** The reader's own scroll: a wheel, then the offset it landed at. */
+	scroll: (top: number) => void;
+	/** The same movement with nobody behind it: a resize, a reflow, a landing. */
+	settle: (top: number) => void;
+	resize: (size: { scrollHeight: number; clientHeight: number }) => void;
+}
+
+const stripWithLayout = (scrollHeight: number, clientHeight: number): Strip => {
+	const element = container.querySelector<HTMLElement>(
+		'[data-testid="agenda-strip"]',
+	);
+	assert.ok(element, "the strip mounted");
+
+	const size = { scrollHeight, clientHeight };
+	let top = 0;
+	Object.defineProperty(element, "scrollHeight", {
+		configurable: true,
+		get: () => size.scrollHeight,
+	});
+	Object.defineProperty(element, "clientHeight", {
+		configurable: true,
+		get: () => size.clientHeight,
+	});
+	Object.defineProperty(element, "scrollTop", {
+		configurable: true,
+		get: () => top,
+		set: (next: number) => {
+			top = Math.max(0, Math.min(next, size.scrollHeight - size.clientHeight));
+		},
+	});
+	for (const [index, child] of [...element.children].entries()) {
+		Object.defineProperty(child, "offsetTop", {
+			configurable: true,
+			value: index * 200,
+		});
+	}
+
+	const raise = () => {
+		act(() => {
+			element.dispatchEvent(new Event("scroll"));
+		});
+	};
+
+	const input = (event: Event) => {
+		act(() => {
+			element.dispatchEvent(event);
+		});
+	};
+
+	const moveTo = (next: number) => {
+		element.scrollTop = next;
+		raise();
+	};
+
+	return {
+		element,
+		input,
+		moveTo,
+		scroll: (next) => {
+			input(new Event("wheel", { bubbles: true }));
+			moveTo(next);
+		},
+		settle: moveTo,
+		resize: (next) => {
+			Object.assign(size, next);
+			// A pane that shrank around a scroller takes its offset back with it,
+			// which is a scroll event nobody asked for.
+			const held = top;
+			element.scrollTop = held;
+			act(() => {
+				window.dispatchEvent(new Event("resize"));
+			});
+			raise();
+		},
+	};
+};
+
+/**
+ * Five days with one booking each. The strip stands barely taller than the pane
+ * and well inside the distance both ends are fetched at, which is the case the
+ * runaway needs: every end is reached, from the first layout pass onwards.
+ */
+const SPARSE = { scrollHeight: 800, clientHeight: 640 };
+/** Enough days that both ends are somewhere the reader has to go to reach. */
+const LONG = { scrollHeight: 5_000, clientHeight: 640 };
+
+describe("a strip shorter than the pane holding it", () => {
+	it("asks for no days at all when it mounts on the day the address named", () => {
+		render();
+		const strip = stripWithLayout(SPARSE.scrollHeight, SPARSE.clientHeight);
+		strip.settle(0);
+		assert.equal(reachedEnd, 0);
+		assert.equal(reachedStart, 0);
+		assert.deepEqual(visited, []);
+	});
+
+	it("asks for none as the layout settles under it", () => {
+		render();
+		const strip = stripWithLayout(SPARSE.scrollHeight, SPARSE.clientHeight);
+		// A font swaps, the rows re-measure, and the landing is re-applied against
+		// the height it now has. Every one of these raises a scroll event.
+		for (const top of [0, 24, 8, 0]) strip.settle(top);
+		assert.equal(reachedEnd, 0);
+		assert.equal(reachedStart, 0);
+	});
+
+	it("asks for none when the pane is resized around it", () => {
+		render();
+		const strip = stripWithLayout(SPARSE.scrollHeight, SPARSE.clientHeight);
+		strip.settle(120);
+		strip.resize({ scrollHeight: 800, clientHeight: 240 });
+		strip.resize({ scrollHeight: 800, clientHeight: 900 });
+		assert.equal(reachedEnd, 0);
+		assert.equal(reachedStart, 0);
+	});
+
+	it("leaves the address where it is, having never moved for a reader", () => {
+		render();
+		const strip = stripWithLayout(SPARSE.scrollHeight, SPARSE.clientHeight);
+		strip.settle(120);
+		strip.resize({ scrollHeight: 800, clientHeight: 900 });
+		assert.deepEqual(visited, []);
+	});
+});
+
+describe("a reader scrolling the strip", () => {
+	it("asks for the days ahead once, on reaching the end", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.scroll(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 1);
+		assert.equal(reachedStart, 0);
+	});
+
+	it("moves the day under the header with them, once", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.scroll(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(visited.length, 1);
+		assert.equal(visited[0], dates[dates.length - 1]);
+	});
+
+	it("asks again for nothing while it stands still at that end", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.scroll(LONG.scrollHeight - LONG.clientHeight);
+		strip.scroll(LONG.scrollHeight - LONG.clientHeight);
+		strip.settle(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 1);
+	});
+
+	/**
+	 * Every way a reader moves a scroller counts, and the strip knows nothing
+	 * about which one it was: a wheel, a key held on a focused row, a scrollbar
+	 * dragged for as long as the reader likes. What it rejects is movement with
+	 * nobody behind it, not movement of the wrong kind.
+	 */
+	it("takes a key press for a gesture", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.input(
+			new KeyboardEvent("keydown", { key: "PageDown", bubbles: true }),
+		);
+		strip.moveTo(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 1);
+	});
+
+	it("takes a scrollbar drag, however long the reader holds it", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.input(new PointerEvent("pointerdown", { bubbles: true }));
+		strip.moveTo(2_000);
+		// Long enough that the press alone has gone stale; the drag is what is
+		// still keeping the strip theirs.
+		advance(5_000);
+		strip.input(new PointerEvent("pointermove", { bubbles: true, buttons: 1 }));
+		strip.moveTo(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 1);
+	});
+
+	it("does not take a cursor merely resting over it", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.input(new PointerEvent("pointermove", { bubbles: true, buttons: 0 }));
+		strip.moveTo(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 0);
+	});
+
+	it("lets a gesture go stale rather than holding it open", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.input(new Event("wheel", { bubbles: true }));
+		advance(5_000);
+		strip.moveTo(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedEnd, 0);
+	});
+
+	it("asks for the days behind only on the way back to the start", () => {
+		render();
+		const strip = stripWithLayout(LONG.scrollHeight, LONG.clientHeight);
+		strip.scroll(LONG.scrollHeight - LONG.clientHeight);
+		assert.equal(reachedStart, 0);
+		strip.scroll(80);
+		assert.equal(reachedStart, 1);
+		assert.equal(reachedEnd, 1);
+	});
+});
+
+describe("the end of what the strip grows to on its own", () => {
+	it("says so and offers the next stretch, rather than fetching it", () => {
+		let asked = 0;
+		render({
+			atEndCap: true,
+			onLoadLater: () => {
+				asked += 1;
+			},
+		});
+		const later = container.querySelector<HTMLElement>(
+			'[data-testid="agenda-load-later"]',
+		);
+		assert.ok(later, "the strip offered the days past the cap");
+		assert.match(later.textContent ?? "", /Show later days/);
+
+		act(() => {
+			later.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+		});
+		assert.equal(asked, 1);
+	});
+
+	it("offers the days behind the same way", () => {
+		render({ atStartCap: true, onLoadEarlier: () => {} });
+		const earlier = container.querySelector(
+			'[data-testid="agenda-load-earlier"]',
+		);
+		assert.ok(earlier, "the strip offered the days before the cap");
+	});
+
+	it("shows neither while the run still has room to grow", () => {
+		render();
+		assert.equal(
+			container.querySelector('[data-testid^="agenda-load-"]'),
+			null,
+		);
+	});
+});

package/src/components/agenda-flow.stories.tsx

@@ -176,6 +176,22 @@ export const EmptyRun: Story = {
 	args: { ...base, density: "pills", focusDate: "2026-06-18" },
 };
 
+/**
+ * A year either way is as far as the strip grows on the scroll. Past that the
+ * reader says so, rather than the strip fetching its way across a decade
+ * because a sparse diary never fills the pane.
+ */
+export const AtTheCap: Story = {
+	args: {
+		...base,
+		density: "pills",
+		atStartCap: true,
+		atEndCap: true,
+		onLoadEarlier: () => {},
+		onLoadLater: () => {},
+	},
+};
+
 /** The selection is a state of the row, not a colour laid over it. */
 export const Selected: Story = {
 	args: { ...base, density: "detail", selectedEventId: "evt_roadmap" },

package/src/components/agenda-flow.tsx

@@ -11,6 +11,13 @@
  * Scrolling never paginates. Reaching either end asks the owner for more days
  * and the scroll position is held across the insert, so the strip has no seams
  * and no page boundaries to lose your place at.
+ *
+ * Reaching an end is something a reader does, never something a layout is. A
+ * sparse diary draws shorter than the distance either end is fetched at, so an
+ * end measured off the content alone is reached the moment the strip mounts and
+ * stays reached however many days arrive — which walked the range, and the
+ * address with it, out into empty years. What asks for more days is a scroll
+ * the reader drove, moving toward the end it asks about.
  */
 import { CalendarOff, ChevronRight, Layers, MapPin, Users } from "lucide-react";
 import {
@@ -64,6 +71,17 @@ const LONG_FREE_MINUTES = 150;
 /** The hue every calendar the caller did not describe falls back to. */
 const FALLBACK_COLOR: CalendarColorId = "cal-1";
 
+/** How close to either end a scroll has to come before more days are asked for. */
+const REACH_BEHIND = 600;
+const REACH_AHEAD = 900;
+
+/**
+ * How long after a wheel, a drag, a touch or a key a scroll is still the
+ * reader's. Momentum and a held key both keep scrolling after the input stops;
+ * a layout pass or a resize minutes later does not get to borrow the gesture.
+ */
+const INTENT_MS = 1_500;
+
 /** Nothing outstanding, which is what a caller that never fetches has. */
 const EMPTY_DATES: ReadonlySet<string> = new Set();
 
@@ -105,6 +123,15 @@ export interface AgendaFlowProps {
 	onReachEnd: () => void;
 	/** The day under the sticky header, for the position map. */
 	onVisibleDayChange: (date: string) => void;
+	/**
+	 * The run has grown as far as it goes without being asked. The strip says so
+	 * at that end and offers the reader the next stretch, rather than fetching
+	 * its way across a decade nobody scrolled to.
+	 */
+	atStartCap?: boolean;
+	atEndCap?: boolean;
+	onLoadEarlier?: () => void;
+	onLoadLater?: () => void;
 	/**
 	 * Days whose events have not arrived. They draw as a skeleton and are never
 	 * collapsed into a run: a day nobody has heard back about is not a day with
@@ -142,6 +169,10 @@ export function AgendaFlow({
 	onReachStart,
 	onReachEnd,
 	onVisibleDayChange,
+	atStartCap = false,
+	atEndCap = false,
+	onLoadEarlier,
+	onLoadLater,
 	loadingDates = EMPTY_DATES,
 	freeOn = freeStretchesOn,
 	scrollTarget,
@@ -156,6 +187,15 @@ export function AgendaFlow({
 	const askedStart = useRef("");
 	const askedEnd = useRef("");
 	const landed = useRef(false);
+	/*
+	 * Where the scroller was left, so the next scroll event can be read as a
+	 * movement and in which direction. Every offset this component writes itself
+	 * records itself here, which is what makes the take-back after a prepend, and
+	 * the landing, read as no movement at all.
+	 */
+	const resting = useRef(0);
+	/** When the reader last touched the strip. */
+	const reached = useRef(0);
 	const [visibleDate, setVisibleDate] = useState(focusDate);
 
 	const lookup = useMemo(() => lookupOf(calendars), [calendars]);
@@ -172,6 +212,7 @@ export function AgendaFlow({
 			element.scrollTop += element.scrollHeight - previousHeight.current;
 		previousFirst.current = firstDate;
 		previousHeight.current = element.scrollHeight;
+		resting.current = element.scrollTop;
 	});
 
 	/* Landing puts you on the focused day; after that the strip is yours. Rows
@@ -188,6 +229,7 @@ export function AgendaFlow({
 			const anchor = anchors.current.get(focusDate);
 			if (dropped || !anchor) return;
 			element.scrollTop = anchor.offsetTop - HEADER_HEIGHT;
+			resting.current = element.scrollTop;
 		};
 		settle();
 		setVisibleDate(focusDate);
@@ -205,20 +247,66 @@ export function AgendaFlow({
 		const anchor = anchors.current.get(scrollTarget.date);
 		if (!element || !anchor) return;
 		element.scrollTop = anchor.offsetTop - HEADER_HEIGHT;
+		resting.current = element.scrollTop;
 		setVisibleDate(scrollTarget.date);
 		onVisibleDayChange(scrollTarget.date);
 	}, [scrollTarget, onVisibleDayChange]);
 
+	/*
+	 * A wheel, a drag, a touch or a key: the strip is the reader's from here.
+	 * Listened for natively rather than through React, because a `div` carrying
+	 * key and pointer handlers has to claim a role to be one, and the strip is a
+	 * scroller rather than a control — announcing it as one would be a lie told
+	 * to a screen reader for the sake of a lint rule.
+	 */
+	useEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		const note = () => {
+			reached.current = Date.now();
+		};
+		const kinds = [
+			"wheel",
+			"pointerdown",
+			"touchstart",
+			"touchmove",
+			"keydown",
+		];
+		// A scrollbar dragged slowly is one press and then nothing but movement,
+		// which would otherwise run out of gesture halfway down the strip. Held
+		// buttons only: a cursor resting over the strip is not scrolling it.
+		const drag = (event: PointerEvent) => {
+			if (event.buttons !== 0) note();
+		};
+		for (const kind of kinds)
+			element.addEventListener(kind, note, { passive: true });
+		element.addEventListener("pointermove", drag, { passive: true });
+		return () => {
+			for (const kind of kinds) element.removeEventListener(kind, note);
+			element.removeEventListener("pointermove", drag);
+		};
+	}, []);
+
 	const handleScroll = () => {
 		const element = scroller.current;
 		if (!element) return;
 
+		const top = element.scrollTop;
+		const moved = top - resting.current;
+		resting.current = top;
+
+		/* Everything below follows the reader and only the reader. A mount, a
+		   resize, a font swap and the offset taken back after a prepend all raise
+		   this event without anybody having scrolled, and answering them is how
+		   the range and the address walked off on their own. */
+		if (moved === 0 || Date.now() - reached.current > INTENT_MS) return;
+
 		const seen = [...anchors.current.entries()]
 			.filter(([, node]) => node.isConnected)
 			.sort((a, b) => a[1].offsetTop - b[1].offsetTop);
 		let current = "";
 		for (const [date, node] of seen) {
-			if (node.offsetTop - HEADER_HEIGHT - 8 > element.scrollTop) break;
+			if (node.offsetTop - HEADER_HEIGHT - 8 > top) break;
 			current = date;
 		}
 		if (current !== "" && current !== visibleDate) {
@@ -226,12 +314,13 @@ export function AgendaFlow({
 			onVisibleDayChange(current);
 		}
 
-		if (element.scrollTop < 600 && askedStart.current !== firstDate) {
+		if (moved < 0 && top < REACH_BEHIND && askedStart.current !== firstDate) {
 			askedStart.current = firstDate;
 			onReachStart();
 		}
 		if (
-			element.scrollTop + element.clientHeight > element.scrollHeight - 900 &&
+			moved > 0 &&
+			top + element.clientHeight > element.scrollHeight - REACH_AHEAD &&
 			askedEnd.current !== lastDate
 		) {
 			askedEnd.current = lastDate;
@@ -268,6 +357,15 @@ export function AgendaFlow({
 				)}
 			</div>
 
+			{atStartCap && onLoadEarlier && (
+				<CapEdge
+					label="Show earlier days"
+					testId="agenda-load-earlier"
+					onLoad={onLoadEarlier}
+					touch={touch}
+				/>
+			)}
+
 			{rows.map((row) => (
 				<FlowRow
 					key={row.key}
@@ -288,10 +386,51 @@ export function AgendaFlow({
 					touch={touch}
 				/>
 			))}
+
+			{atEndCap && onLoadLater && (
+				<CapEdge
+					label="Show later days"
+					testId="agenda-load-later"
+					onLoad={onLoadLater}
+					touch={touch}
+				/>
+			)}
 		</div>
 	);
 }
 
+/**
+ * Where the run stops growing on its own. A year either way is further than a
+ * reader scrolls in one sitting, so this is rarely on screen — and when it is,
+ * the next stretch costs a click rather than arriving because the strip decided
+ * it had reached the end of itself.
+ */
+function CapEdge({
+	label,
+	testId,
+	onLoad,
+	touch,
+}: {
+	label: string;
+	testId: string;
+	onLoad: () => void;
+	touch?: boolean;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onLoad}
+			data-testid={testId}
+			className={cn(
+				"flex w-full items-center justify-center gap-2 border-y border-dashed border-line bg-surface-sunken px-row-inset text-xs font-medium text-fg-muted outline-none transition-colors hover:border-accent hover:text-accent focus-visible:ring-2 focus-visible:ring-ring",
+				touch ? "min-h-14 py-3" : "py-2",
+			)}
+		>
+			{label}
+		</button>
+	);
+}
+
 /* ------------------------------------------------------------------ */
 /* Rows                                                                */
 /* ------------------------------------------------------------------ */

package/src/components/wizard.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { AtSign, Inbox, Server } from "lucide-react";
 import { useState } from "react";
+import { Button } from "./button.js";
 import type { ServerSecurity } from "./security-select.js";
-import { ConnectorTile, ServerFields } from "./wizard.js";
+import { ConnectorTile, ServerFields, WizardShell } from "./wizard.js";
 
 const meta: Meta = {
 	title: "Components/Wizard",
@@ -101,3 +102,53 @@ export const ServerFieldsPhone: Story = {
 	globals: { viewport: { value: "mobile" } },
 	render: () => <ServerFieldsDemo />,
 };
+
+const longStepRows = Array.from(
+	{ length: 60 },
+	(_, index) => `Row ${index + 1} of a report nobody sized the box for`,
+);
+
+function LongStep() {
+	return (
+		<WizardShell
+			steps={["File", "Review", "Credentials", "Folders"]}
+			activeStep={1}
+			title="What this file will change"
+			subtitle="A step whose content runs well past the bottom of the screen."
+			footer={
+				<>
+					<Button variant="ghost">Back</Button>
+					<Button variant="primary">Continue</Button>
+				</>
+			}
+		>
+			<ul className="divide-y divide-line">
+				{longStepRows.map((row) => (
+					<li key={row} className="py-2 text-sm text-fg">
+						{row}
+					</li>
+				))}
+			</ul>
+		</WizardShell>
+	);
+}
+
+/**
+ * A step taller than the viewport, on the 1512×827 laptop the config import
+ * wizard was found unusable on (#1021). The rows scroll inside the card; the
+ * title and the Continue button stay on screen.
+ */
+export const ShellLongStepShortViewport: Story = {
+	name: "WizardShell — long step, short viewport",
+	parameters: { layout: "fullscreen" },
+	globals: { viewport: { value: "laptopShort" } },
+	render: () => <LongStep />,
+};
+
+/** The same step on a phone with the address bar and system nav showing. */
+export const ShellLongStepPhoneShort: Story = {
+	name: "WizardShell — long step, short phone",
+	parameters: { layout: "fullscreen" },
+	globals: { viewport: { value: "mobileShort" } },
+	render: () => <LongStep />,
+};

package/src/components/wizard.tsx

@@ -76,25 +76,40 @@ export function WizardShell({
 	hideSteps,
 }: WizardShellProps) {
 	return (
-		// First-run is a focal moment: the wizard column is horizontally
-		// centered with its top edge anchored ~30% down the viewport
-		// (optical center) on larger screens. On phone the top padding is
-		// minimal so taller steps (connector picker, servers) don't push the
-		// CTA bar below the fold — the shell scrolls if content overflows.
-		<div className="flex min-h-dvh w-full flex-col items-center overflow-y-auto bg-canvas pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(2rem,env(safe-area-inset-left,0px))] pr-[max(2rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] font-sans text-fg sm:pt-[30vh]">
+		// The shell is exactly the viewport, never more: the step's own content
+		// is what scrolls, and the title and the footer actions are pinned
+		// either side of it. A dry-run report or a list of accounts can run to
+		// any length and the primary action stays where the reader can press it
+		// (#1021).
+		//
+		// First-run is still a focal moment, so on larger screens the column
+		// sits with its top edge about 30% down the viewport (optical centre).
+		// That offset is a flex spacer rather than top padding because padding
+		// cannot yield: the spacer collapses first and the card only gives up
+		// height once the offset is gone.
+		<div className="flex h-dvh w-full flex-col items-center overflow-hidden bg-canvas pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(2rem,env(safe-area-inset-left,0px))] pr-[max(2rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] font-sans text-fg">
+			<div className="hidden shrink-[9999] basis-[30vh] sm:block" />
 			{!hideSteps && (
-				<div className="mb-5 w-full max-w-xl">
+				<div className="mb-5 w-full max-w-xl shrink-0">
 					<StepRail steps={steps} activeStep={activeStep} />
 				</div>
 			)}
-			<Card raised className="w-full max-w-xl">
-				<div className="px-5 pt-5">
+			<Card raised className="flex w-full min-h-0 max-w-xl flex-col">
+				<div className="shrink-0 px-5 pt-5">
 					<h1 className="text-xl font-semibold text-fg">{title}</h1>
 					{subtitle && <p className="mt-1 text-sm text-fg-muted">{subtitle}</p>}
 				</div>
-				<div className="px-5 py-5">{children}</div>
+				<div
+					data-testid="wizard-body"
+					className="min-h-0 overflow-y-auto px-5 py-5"
+				>
+					{children}
+				</div>
 				{footer && (
-					<div className="flex items-center justify-between gap-3 border-t border-line px-5 py-3">
+					<div
+						data-testid="wizard-footer"
+						className="flex shrink-0 items-center justify-between gap-3 border-t border-line px-5 py-3"
+					>
 						{footer}
 					</div>
 				)}