From bc662bc4921ceea7951315d3d3d99c1b963647c3 Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 1 Oct 2026 10:28:20 +0800 Subject: [PATCH] web: cancel the sibling margin inside a card grid --- docs/design.md | 7 +++++++ frontend/src/app.css | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/docs/design.md b/docs/design.md index 7690438..2994e2e 100644 --- a/docs/design.md +++ b/docs/design.md @@ -307,6 +307,13 @@ A card is a column, so its **action sits on the bottom line of every card** whatever the length of the text above it. The summary is not truncated: a uniform height means a card with a longer summary simply carries more lines. +The space between cards comes from the grid `gap` **only**. The sibling +margin that stacks cards outside a grid is cancelled inside one, because a +card with a preceding sibling would otherwise carry both a row gap and a +sibling margin. The first card of a row has no preceding sibling, so it +would sit flush while the rest of the row sank by one gap, which reads as a +misalignment even though every card is the same size. + The sidebar is **a sticky element inside a frame**. The frame carries the surface and the rule so the column is drawn for the whole page; the sidebar itself is `sticky` and scrolls. Without the frame the column would end one diff --git a/frontend/src/app.css b/frontend/src/app.css index 2015e68..696e2ab 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -406,10 +406,17 @@ button.ghost:hover:not(:disabled) { padding: 1.1rem 1.25rem; } +/* Cards stacked outside a grid. Inside a grid the `gap` spaces them, and a + sibling margin would add a second gap, pushing every card after the first + in a row down by one row gap while the first stays flush. */ .card + .card { margin-top: 1rem; } +.grid.cards > .card + .card { + margin-top: 0; +} + /* A filter field is a control, not a paragraph, so it is given a measure rather than the whole width of the page. */ .filter-field {