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
change
commit f82e6e696c4d277141842a19d66762ba516f4281
author Claude <noreply@anthropic.com>
date
parent 229ccefe
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;