admin/WebinarNotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move responsive overrides after the rules they override

Browse Source 
At-rules do not raise specificity, so a rule inside @container or @media
competes with the base rule on source order alone. The collapse blocks
sat above .wd-pane-right's base rule, so the base rule won and the
stacked layout silently never applied. All overrides now live at the end
of the file.
This commit is contained in:
meels
2026-07-28 16:50:30 +02:00
parent 4803c009a2
commit 605e57751c
1 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
.obsidian/plugins/webinar-dash/styles.css vendored
View File

@@ -120,33 +120,6 @@
border-color: var(--wd-border-strong); 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; } .wd-pane { display: flex; flex-direction: column; gap: 20px; }
/* The coverage pane sits behind a hairline with a 24px inset, so its table does /* 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; border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px;
color: var(--wd-fg-2); 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;
}
}