From c374099a126ebf7515c7ace5466856d7d1bb2696 Mon Sep 17 00:00:00 2001 From: meels Date: Tue, 28 Jul 2026 15:24:55 +0200 Subject: [PATCH] fix: lift the readable-line-width cap from JS, not CSS alone The CSS-only fix lost a specificity fight: Obsidian qualifies the sizer with its view class, outranking a bare .markdown-preview-sizer:has(...) declaration with no !important. The cap stayed, the container query correctly saw a ~700px container, and the grid collapsed to one column. widenHost() now lifts the cap inline at render time, which cannot lose on specificity and does not depend on Obsidian's class names staying stable. The CSS rules remain as belt-and-braces, now with the view-class variants and !important. --- .obsidian/plugins/webinar-dash/main.js | 28 +++++++++++++++++++++++ .obsidian/plugins/webinar-dash/styles.css | 12 ++++++++-- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/.obsidian/plugins/webinar-dash/main.js b/.obsidian/plugins/webinar-dash/main.js index a64dbc6..ecb01b1 100644 --- a/.obsidian/plugins/webinar-dash/main.js +++ b/.obsidian/plugins/webinar-dash/main.js @@ -382,8 +382,36 @@ class WebinarDashPlugin extends PluginBase { }); } + // Obsidian caps note content at --file-line-width when readable line length + // is on, which squeezes a two-pane dashboard into a column. Lift the cap on + // whichever ancestor carries it. + // + // Done here rather than in CSS on purpose: an inline style beats the app + // stylesheet without an !important arms race, and the computed-style walk + // means this keeps working even if Obsidian renames the sizer classes. The + // walk stops at the first capped ancestor and is bounded, so it cannot climb + // out into the workspace chrome and widen something it shouldn't. + widenHost(root) { + const known = root.closest(".markdown-preview-sizer, .cm-sizer"); + if (known) { + known.style.maxWidth = "none"; + return known; + } + let el = root.parentElement; + for (let hops = 0; el && hops < 6; hops += 1, el = el.parentElement) { + if (el.classList.contains("workspace-leaf")) break; + const max = window.getComputedStyle(el).maxWidth; + if (max && max !== "none") { + el.style.maxWidth = "none"; + return el; + } + } + return null; + } + async renderAll(root, cfg) { root.empty(); + this.widenHost(root); const gate = this.spawnGate(); const refresh = () => { this.renderAll(root, cfg); }; diff --git a/.obsidian/plugins/webinar-dash/styles.css b/.obsidian/plugins/webinar-dash/styles.css index a68c3d6..f930de2 100644 --- a/.obsidian/plugins/webinar-dash/styles.css +++ b/.obsidian/plugins/webinar-dash/styles.css @@ -78,10 +78,18 @@ 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`. + + The plugin also lifts this cap inline in `widenHost()`, which is the path + that actually carries the load — an inline style cannot lose a specificity + fight. These rules are the belt-and-braces copy, and they need !important + because Obsidian's own rule qualifies the sizer with the view class and so + outranks a bare `.markdown-preview-sizer:has(...)`. ------------------------------------------------------------------ */ .markdown-preview-sizer:has(.webinar-dash), -.markdown-source-view.mod-cm6 .cm-sizer:has(.webinar-dash) { - max-width: none; +.markdown-preview-view.is-readable-line-width .markdown-preview-sizer:has(.webinar-dash), +.markdown-source-view.mod-cm6 .cm-sizer:has(.webinar-dash), +.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer:has(.webinar-dash) { + max-width: none !important; } .wd-grid {