developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): readable order card — status as background tint, corner ✕ #58

Merged
developer merged 2 commits from feature/issue-46-order-card-readability into development 2026-05-26 06:39:09 +00:00
Conversation 2 Commits 2 Files Changed 4
+30 -13
3 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2294d8b3d9 - Show all commits
ui/docs/order-composer.md
+9 -4
View File
@@ -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
ui/frontend/playwright.config.ts
+10
View File
@@ -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
+11 -9
View File
@@ -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,