diff --git a/.obsidian/plugins/webinar-dash/styles.css b/.obsidian/plugins/webinar-dash/styles.css index 4cb52f6..f0fcfec 100644 --- a/.obsidian/plugins/webinar-dash/styles.css +++ b/.obsidian/plugins/webinar-dash/styles.css @@ -120,33 +120,6 @@ border-color: var(--wd-border-strong); } -/* Collapse to one column 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 below 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); } - /* 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; - } -} - .wd-pane { display: flex; flex-direction: column; gap: 20px; } /* The coverage pane sits behind a hairline with a 24px inset, so its table does @@ -269,3 +242,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; + } +}