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

fix: give table cells symmetric horizontal padding

Browse Source 
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.
This commit is contained in:
meels
2026-07-28 16:53:25 +02:00
parent 605e57751c
commit ef2e2bd14f
1 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -211,11 +211,14 @@
.wd-tbl th { .wd-tbl th {
font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em; font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--wd-fg-3); font-weight: 500; 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); border-bottom: 1px solid var(--wd-border-strong);
} }
.wd-tbl td { .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; vertical-align: baseline;
} }
.wd-grp td { .wd-grp td {
@@ -242,39 +245,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. Responsive overrides — deliberately last in the file.
At-rules do not raise specificity: a rule inside @container or @media At-rules do not raise specificity: a rule inside @container or @media
competes with the base rule on source order alone. These blocks were 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 previously above the .wd-pane-right base rule, so the base rule won
and the collapsed layout silently never applied. Keep every override and the collapsed layout silently never applied. Keep every override
here, after everything it overrides. here, after everything it overrides.
Collapse on the width that actually matters — the pane's, not the 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 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 dashboard in a narrow split pane would keep two cramped columns. The
container query responds to the pane itself; the media query stays as container query responds to the pane itself; the media query stays as
a floor for a genuinely narrow window. a floor for a genuinely narrow window.
------------------------------------------------------------------ */ ------------------------------------------------------------------ */
@container (max-width: 820px) { @container (max-width: 820px) {
.wd-grid { grid-template-columns: minmax(0, 1fr); } .wd-grid { grid-template-columns: minmax(0, 1fr); }
/* Stacked, the divider belongs above the pane, not beside it. */ /* Stacked, the divider belongs above the pane, not beside it. */
.wd-pane-right { .wd-pane-right {
border-left: 0; border-left: 0;
padding-left: 0; padding-left: 0;
border-top: 1px solid var(--wd-border); border-top: 1px solid var(--wd-border);
padding-top: 20px; padding-top: 20px;
} }
} }
@media (max-width: 820px) { @media (max-width: 820px) {
.wd-grid { grid-template-columns: minmax(0, 1fr); } .wd-grid { grid-template-columns: minmax(0, 1fr); }
.wd-pane-right { .wd-pane-right {
border-left: 0; border-left: 0;
padding-left: 0; padding-left: 0;
border-top: 1px solid var(--wd-border); border-top: 1px solid var(--wd-border);
padding-top: 20px; padding-top: 20px;
} }
} }