Align detail-grid rows on text baseline, not box top
dt (.type-label, --gl-step--2/1) and dd (.type-body-sm, --gl-step--1/1.5)
carry different type styles, so the grid's default cell alignment
(stretch, which top-aligns each cell's content box) still left their
text sitting at different heights — the padding-top: 0.2em on dt was
an eyeballed attempt to compensate that didn't hold up once rendered.
align-items: baseline lines up the text itself instead of the boxes
around it, so it holds regardless of which row's fonts differ.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SYiigu3aFNaiTP9SyKW9mX
diff --git a/public/admin.css b/public/admin.css
index 23754a0..e7db6ba 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -55,17 +55,21 @@
/* The detail card's load-bearing rule: type in one column, value in
the other, every row aligned to the same grid regardless of what
kind of attribute it is. See docs/DESIGN.md, "Alignment is the
- layout." */
+ layout." `align-items: baseline` rather than the grid default
+ (stretch, which top-aligns each cell's content): dt and dd carry
+ different type styles — .type-label at --gl-step--2/1, .type-body-sm
+ at --gl-step--1/1.5 — so lining up their boxes still leaves their
+ text sitting at different heights. Baseline lines up the text itself. */
.detail-grid {
display: grid;
grid-template-columns: 6rem 1fr;
row-gap: var(--gl-space-2xs);
column-gap: var(--gl-space-s);
+ align-items: baseline;
margin: 0;
}
.detail-grid dt {
grid-column: 1;
- padding-top: 0.2em;
}
.detail-grid dd {
grid-column: 2;