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; + } +}