diff --git a/.obsidian/plugins/webinar-dash/main.js b/.obsidian/plugins/webinar-dash/main.js index 5438ee1..1e08103 100644 --- a/.obsidian/plugins/webinar-dash/main.js +++ b/.obsidian/plugins/webinar-dash/main.js @@ -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 || {}; diff --git a/.obsidian/plugins/webinar-dash/styles.css b/.obsidian/plugins/webinar-dash/styles.css index 16f435c..4cb52f6 100644 --- a/.obsidian/plugins/webinar-dash/styles.css +++ b/.obsidian/plugins/webinar-dash/styles.css @@ -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;