From ef2e2bd14f1e70aca1e06d586d1c376550645875 Mon Sep 17 00:00:00 2001 From: meels Date: Tue, 28 Jul 2026 16:53:25 +0200 Subject: [PATCH] fix: give table cells symmetric horizontal padding th and td were padded '... 0' on the left, so the concept column ran flush against the pane edge and every other column sat hard against the preceding cell's text. Group-header rows inherit the change, so they stay aligned with the cells below them. --- .obsidian/plugins/webinar-dash/styles.css | 79 ++++++++++++----------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/.obsidian/plugins/webinar-dash/styles.css b/.obsidian/plugins/webinar-dash/styles.css index f0fcfec..c13c350 100644 --- a/.obsidian/plugins/webinar-dash/styles.css +++ b/.obsidian/plugins/webinar-dash/styles.css @@ -211,11 +211,14 @@ .wd-tbl th { font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wd-fg-3); font-weight: 500; - text-align: left; padding: 0 12px 8px 0; + /* Symmetric horizontal padding. These were `... 0` on the left, which left + the concept column flush against the pane edge and every other column + hard against the preceding cell's text. */ + text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--wd-border-strong); } .wd-tbl td { - padding: 6px 12px 6px 0; border-bottom: 1px solid var(--wd-border-subtle); + padding: 6px 12px; border-bottom: 1px solid var(--wd-border-subtle); vertical-align: baseline; } .wd-grp td { @@ -242,39 +245,39 @@ border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px; color: var(--wd-fg-2); } - -/* ------------------------------------------------------------------ - Responsive overrides — deliberately last in the file. - - At-rules do not raise specificity: a rule inside @container or @media - competes with the base rule on source order alone. These blocks were - previously above the .wd-pane-right base rule, so the base rule won - and the collapsed layout silently never applied. Keep every override - here, after everything it overrides. - - Collapse on the width that actually matters — the pane's, not the - window's. A media query measures the window, so a wide window with the - dashboard in a narrow split pane would keep two cramped columns. The - container query responds to the pane itself; the media query stays as - a floor for a genuinely narrow window. - ------------------------------------------------------------------ */ -@container (max-width: 820px) { - .wd-grid { grid-template-columns: minmax(0, 1fr); } - /* Stacked, the divider belongs above the pane, not beside it. */ - .wd-pane-right { - border-left: 0; - padding-left: 0; - border-top: 1px solid var(--wd-border); - padding-top: 20px; - } -} - -@media (max-width: 820px) { - .wd-grid { grid-template-columns: minmax(0, 1fr); } - .wd-pane-right { - border-left: 0; - padding-left: 0; - border-top: 1px solid var(--wd-border); - padding-top: 20px; - } -} + +/* ------------------------------------------------------------------ + Responsive overrides — deliberately last in the file. + + At-rules do not raise specificity: a rule inside @container or @media + competes with the base rule on source order alone. These blocks were + previously above the .wd-pane-right base rule, so the base rule won + and the collapsed layout silently never applied. Keep every override + here, after everything it overrides. + + Collapse on the width that actually matters — the pane's, not the + window's. A media query measures the window, so a wide window with the + dashboard in a narrow split pane would keep two cramped columns. The + container query responds to the pane itself; the media query stays as + a floor for a genuinely narrow window. + ------------------------------------------------------------------ */ +@container (max-width: 820px) { + .wd-grid { grid-template-columns: minmax(0, 1fr); } + /* Stacked, the divider belongs above the pane, not beside it. */ + .wd-pane-right { + border-left: 0; + padding-left: 0; + border-top: 1px solid var(--wd-border); + padding-top: 20px; + } +} + +@media (max-width: 820px) { + .wd-grid { grid-template-columns: minmax(0, 1fr); } + .wd-pane-right { + border-left: 0; + padding-left: 0; + border-top: 1px solid var(--wd-border); + padding-top: 20px; + } +}