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

fix: restore the coverage pane's divider and inset

Browse Source 
Revert the dashboard-level gutter from the previous commit - it addressed
the wrong element.

The approved mockup gave the right pane a hairline divider and a 24px
left inset (.pane-div). The plan's renderRightPane only ever created a
plain .wd-pane, so neither reached the implementation. The table cells
are deliberately zero-padded on the left so the concept column aligns
with the eyebrow above it, which only reads correctly when the pane
supplies the inset - without it the table ran flush against the grid gap.

Marked with an explicit class rather than :nth-child, since an error box
can occupy that grid slot. Collapsed to one column, the divider moves to
the top edge.
This commit is contained in:
meels
2026-07-28 16:21:46 +02:00
parent 81676e9daa
commit 4803c009a2
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.obsidian/plugins/webinar-dash/main.js vendored
View File

@@ -299,7 +299,10 @@ function renderLeftPane(container, pipeline, onIngest, gate) {
const STATUS_ICON = { covered: "check", partial: "minus", absent: "x" };
function renderRightPane(container, parsed, reconciled, cfg) {
const pane = container.createDiv({ cls: "wd-pane" });
// The right-pane class carries the hairline divider and left inset that
// separate coverage from the source pipeline. Marked explicitly rather than
// selected positionally, because an error box can take this slot in the grid.
const pane = container.createDiv({ cls: "wd-pane wd-pane-right" });
pane.createDiv({ cls: "wd-eyebrow", text: "Coverage — by station" });
const meta = parsed.meta || {};

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

@@ -32,13 +32,6 @@
rows get hard to track across. Cap the whole dashboard, not just the
grid, so the toolbar stays flush with the panes below it. */
max-width: 1600px;
/* Lifting the host's readable-line-width cap also removes the centring that
was providing the note's side margins, so the content ran flush to the
pane edge. Restore a gutter on our own element rather than reaching into
Obsidian's: centred when the pane is wider than the cap, and a fixed
24px inset (the tesanti gutter) at every width including narrow panes. */
margin-inline: auto;
padding-inline: 24px;
/* Makes this element the reference for the @container query further down,
so the grid collapses on the pane's width rather than the window's. */
container-type: inline-size;
@@ -134,14 +127,38 @@
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
not run flush against the gap between the two panes. The table cells are
deliberately zero-padded on the left (`.wd-tbl td`) so the concept column
aligns with the eyebrow above it — that alignment only reads correctly when
the pane itself provides the inset, which is what this rule restores. */
.wd-pane-right {
border-left: 1px solid var(--wd-border);
padding-left: 24px;
}
.wd-eyebrow {
font-family: var(--wd-mono); font-size: 11px; line-height: 1;
letter-spacing: 0.12em; text-transform: uppercase;