From 2294d8b3d980b62f002e7ac6bdb3a2be5cbb543d Mon Sep 17 00:00:00 2001 From: Ilia Denisov Date: Tue, 26 May 2026 08:28:58 +0200 Subject: [PATCH] =?UTF-8?q?fix(ui):=20tighter=20order=20card=20=E2=80=94?= =?UTF-8?q?=20calculator-scale=20font,=20corner-flush=20=E2=9C=95;=20stabi?= =?UTF-8?q?lise=20report-sections=20e2e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner review on PR #58: - shrink the order-card body to 0.8rem (matching the calculator's body text scale) so the order list reads as part of the sidebar's density, not its own larger surface; - shrink the delete ✕ to 0.95rem and glue it flush to the card's top-right corner (no offset, sized to fit the corner padding-space); - tighten the card padding to match the smaller text. Independently — the same review asked to fix `report-sections › every TOC anchor lands its section in view`, which had been a long-standing e2e flake (run #366 on `development` already failed it twice before passing on retry; my PR's run #367 simply exhausted all five retries). The root cause is the smooth `scrollIntoView` settling slower than Playwright's 5 s viewport wait under heavy CI load. The production TOC already honours `prefers-reduced-motion: reduce` and swaps to an instant scroll there; switching the Playwright config to that media mode makes every spec deterministic without touching production code. --- ui/docs/order-composer.md | 13 +++++++++---- ui/frontend/playwright.config.ts | 10 ++++++++++ ui/frontend/src/lib/sidebar/order-tab.svelte | 20 +++++++++++--------- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/ui/docs/order-composer.md b/ui/docs/order-composer.md index 4a74be0..236ad44 100644 --- a/ui/docs/order-composer.md +++ b/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 -control is a small framed `✕` button absolutely positioned in the -card's top-right corner — always visible (no hover-only reveal) and -labelled by `game.sidebar.order.command_delete` for assistive tech. +`order-command-status-N` testids still observe it. Card text sits at +`0.8rem` — the same scale the calculator tab uses for its body labels +— so the order list reads as part of the same sidebar density rather +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 diff --git a/ui/frontend/playwright.config.ts b/ui/frontend/playwright.config.ts index f2d664c..d414a70 100644 --- a/ui/frontend/playwright.config.ts +++ b/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"] } }, diff --git a/ui/frontend/src/lib/sidebar/order-tab.svelte b/ui/frontend/src/lib/sidebar/order-tab.svelte index 71357c5..a6d308f 100644 --- a/ui/frontend/src/lib/sidebar/order-tab.svelte +++ b/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; - padding: 0.4rem 1.9rem 0.4rem 0.5rem; + gap: 0.4rem; + 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; - right: 0.2rem; + top: 0; + right: 0; display: inline-flex; align-items: center; justify-content: center; - width: 1.5rem; - height: 1.5rem; + width: 0.95rem; + 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-radius: 3px; + border: 1px solid var(--color-border-subtle); + border-radius: 0 3px 0 3px; cursor: pointer; } .delete:hover,