ui/docs/order-composer.md

@@ -114,10 +114,15 @@ as `--color-danger-subtle`, and `draft` / `valid` / `submitting` as
 `--color-warning-subtle` (the "not yet acknowledged by the server"
 group, including the offline mode). The textual status name stays in
 the DOM as a `.sr-only` node so screen readers and the existing
-`order-command-status-N` testids still observe it. The per-row delete
+`order-command-status-N` testids still observe it. Card text sits at
-control is a small framed `✕` button absolutely positioned in the
+`0.8rem` — the same scale the calculator tab uses for its body labels
-card's top-right corner — always visible (no hover-only reveal) and
+— so the order list reads as part of the same sidebar density rather
-labelled by `game.sidebar.order.command_delete` for assistive tech.
+than its own larger surface. Long labels wrap inside the card
+(`overflow-wrap: anywhere`) instead of being truncated. The per-row
+delete control is a tiny framed `✕` flush against the card's
+top-right corner (no offset, sized to fit the corner padding-space)
+— always visible, never hover-only, and labelled by
+`game.sidebar.order.command_delete` for assistive tech.
 
 ## Discriminated union shape
 

ui/frontend/playwright.config.ts

@@ -17,6 +17,16 @@ export default defineConfig({
 		baseURL: "http://localhost:5173",
 		trace: "retain-on-failure",
 		screenshot: "only-on-failure",
+		// Force `prefers-reduced-motion: reduce` for every spec. The
+		// production UI honours the preference (e.g. report-toc swaps
+		// `scrollIntoView({behavior: "smooth"})` for `"auto"`), so
+		// running the e2e suite in this mode keeps anchor scrolls and
+		// other animations synchronous — which avoids the long-standing
+		// `report-sections › every TOC anchor lands its section in view`
+		// flake where the smooth-scroll for sections near the bottom of
+		// the page failed to settle within Playwright's 5 s viewport
+		// wait under CI load.
+		contextOptions: { reducedMotion: "reduce" },
 	},
 	projects: [
 		{ name: "chromium-desktop", use: { ...devices["Desktop Chrome"] } },

ui/frontend/src/lib/sidebar/order-tab.svelte

@@ -285,8 +285,10 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 		display: grid;
 		grid-template-columns: auto 1fr;
 		align-items: baseline;
-		gap: 0.5rem;
+		gap: 0.4rem;
-		padding: 0.4rem 1.9rem 0.4rem 0.5rem;
+		padding: 0.3rem 1.1rem 0.3rem 0.5rem;
+		font-size: 0.8rem;
+		line-height: 1.3;
 		background: var(--color-surface-overlay);
 		border: 1px solid var(--color-border-subtle);
 		border-radius: 4px;
@@ -331,21 +333,21 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 	}
 	.delete {
 		position: absolute;
-		top: 0.2rem;
+		top: 0;
-		right: 0.2rem;
+		right: 0;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.5rem;
+		width: 0.95rem;
-		height: 1.5rem;
+		height: 0.95rem;
 		padding: 0;
 		font: inherit;
-		font-size: 0.95rem;
+		font-size: 0.65rem;
 		line-height: 1;
 		background: transparent;
 		color: var(--color-text-muted);
-		border: 1px solid var(--color-border);
+		border: 1px solid var(--color-border-subtle);
-		border-radius: 3px;
+		border-radius: 0 3px 0 3px;
 		cursor: pointer;
 	}
 	.delete:hover,