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.
This commit is contained in:
meels
2026-07-28 15:24:55 +02:00
parent 5de50b155a
commit c374099a12
2 changed files with 38 additions and 2 deletions

View File

@@ -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) { async renderAll(root, cfg) {
root.empty(); root.empty();
this.widenHost(root);
const gate = this.spawnGate(); const gate = this.spawnGate();
const refresh = () => { this.renderAll(root, cfg); }; const refresh = () => { this.renderAll(root, cfg); };

View File

@@ -78,10 +78,18 @@
Editor -> Readable line length (off, but that widens every note), or Editor -> Readable line length (off, but that widens every note), or
adding `cssclasses: wide-dash` to the note's frontmatter and swapping adding `cssclasses: wide-dash` to the note's frontmatter and swapping
the :has() selectors below for `.wide-dash .markdown-preview-sizer`. 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-preview-sizer:has(.webinar-dash),
.markdown-source-view.mod-cm6 .cm-sizer:has(.webinar-dash) { .markdown-preview-view.is-readable-line-width .markdown-preview-sizer:has(.webinar-dash),
max-width: none; .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 { .wd-grid {