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

fix: let the dashboard use the full pane width

Browse Source 
Obsidian caps note content at --file-line-width (~700px) with readable
line length on, which squeezed the two-pane grid into a column. Widen
only the sizer that contains a dashboard via :has(), so every other note
keeps its readable width, and cap the dashboard itself at 1600px.

Also swap the collapse breakpoint to a container query. A media query
measures the window, so a wide window with the dashboard in a narrow
split pane kept two cramped columns; the container query responds to the
pane. The media query stays as a floor for a narrow window.
This commit is contained in:
meels
2026-07-28 15:19:57 +02:00
parent 0a7271136a
commit e92c93d6f3
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,13 @@
display: flex;
flex-direction: column;
gap: 16px;
/* Past roughly this width the two panes stop reading as a pair and table
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;
/* 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;
}
.theme-dark .webinar-dash {
@@ -55,6 +62,28 @@
--wd-danger: #ff5c50;
}
/* ------------------------------------------------------------------
Escape Obsidian's readable-line-length cap.
With "Readable line length" on (the default), Obsidian caps note
content at --file-line-width, roughly 700px. That is right for prose
and wrong for a two-pane dashboard, which gets squeezed into a column.
:has() scopes this to the sizer that actually contains a dashboard, so
every other note in the vault keeps its readable width. Both selectors
are needed: reading view sizes on .markdown-preview-sizer, live preview
on .cm-sizer.
If you would rather not rely on this, the alternatives are Settings ->
Editor -> Readable line length (off, but that widens every note), or
adding `cssclasses: wide-dash` to the note's frontmatter and swapping
the :has() selectors below for `.wide-dash .markdown-preview-sizer`.
------------------------------------------------------------------ */
.markdown-preview-sizer:has(.webinar-dash),
.markdown-source-view.mod-cm6 .cm-sizer:has(.webinar-dash) {
max-width: none;
}
.wd-grid {
display: grid;
grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
@@ -83,6 +112,15 @@
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); }
}
@media (max-width: 820px) {
.wd-grid { grid-template-columns: minmax(0, 1fr); }
}