diff --git a/CHANGELOG.md b/CHANGELOG.md index 49fbc52..dccd9e9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -_Nothing yet._ +## [1.1.6] - 2026-06-24 + +### Fixed + +- Wide tables: the full-screen button no longer floats off-screen at the table's + hidden far-right edge. The host is now a grid that caps itself at the visible + column width (so the table's overflow stays inside our own scroller) and the + button is pinned to the visible top-right corner. +- Full-screen tables no longer show stray ":::"/"⋮" marks: Obsidian's Live + Preview table-editor chrome is now stripped from the full-screen clone on + both axes — column and row menu buttons (`.table-col-btn`, `.table-row-btn`) + as well as the column and row drag grips (`.table-col-drag-handle`, + `.table-row-drag-handle`). The earlier fix missed the horizontal column grip. ## [1.1.5] - 2026-06-24 diff --git a/manifest.json b/manifest.json index 72bce20..03cf03b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "lookout", "name": "Lookout", - "version": "1.1.5", + "version": "1.1.6", "minAppVersion": "1.0.0", "description": "Survey wide content instead of scrolling sideways. Pan and zoom Mermaid diagrams (wheel, Ctrl+wheel, or buttons), fit them to the frame, and open diagrams or wide tables full-screen.", "author": "Post-Math", diff --git a/src/main.ts b/src/main.ts index 4592fc5..c36ee88 100644 --- a/src/main.ts +++ b/src/main.ts @@ -708,6 +708,18 @@ interface TableViewOptions { anchor: Node | null; } +/** + * Obsidian's Live Preview table editor injects interactive controls *inside* + * the rendered table, on both axes: the column/row menu buttons + * (`.table-col-btn`, `.table-row-btn`) and the drag grips + * (`.table-col-drag-handle` — a horizontal ":::" grip, `.table-row-drag-handle` + * — a vertical "⋮" grip). They are useful while editing but are dead chrome in + * our read-only full-screen clone, so we strip all four from the clone (never + * the live table). + */ +const TABLE_EDITOR_CHROME = + ".table-col-btn, .table-row-btn, .table-col-drag-handle, .table-row-drag-handle"; + /** * Wide tables get a single full-screen button (no zoom). Inline, the table * keeps its normal horizontal scroll inside our own scroll wrapper so the @@ -765,6 +777,9 @@ class TableView { const scroll = el("div", "lookout-table-fs-scroll markdown-rendered"); const clone = this.table.cloneNode(true) as HTMLTableElement; clone.classList.add("lookout-table-fs-table"); + // Drop the Live Preview editor's drag handles/menu buttons that came along + // with the clone — they would otherwise show as stray ":::"/"⋮" marks. + clone.querySelectorAll(TABLE_EDITOR_CHROME).forEach((node) => node.remove()); scroll.appendChild(clone); overlay.appendChild(scroll); diff --git a/styles.css b/styles.css index 08a0f31..3db38ca 100644 --- a/styles.css +++ b/styles.css @@ -248,18 +248,28 @@ } /* ---------- tables (full-screen only, no zoom) ---------- */ +/* + * The host is a 1x1 grid; the scroller and the button share that single cell + * (they overlay). `minmax(0, 1fr)` + the scroller's `min-width: 0` cap the host + * at the available column width so it never balloons to the table's intrinsic + * width — even when an ancestor is a shrink-to-fit / horizontally-scrolling + * block (Obsidian's `.cm-table-widget`). That keeps the table's overflow inside + * our own scroller and the button pinned to the *visible* corner instead of + * floating off-screen at the table's far-right edge. + */ .lookout-table-host { position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; } -/* Keep the table's horizontal scroll inside our own wrapper so the button - can stay pinned to the visible corner instead of scrolling away. */ .lookout-table-scroll { + grid-area: 1 / 1; + min-width: 0; overflow-x: auto; overflow-y: hidden; - max-width: 100%; } .lookout-table-scroll > table { @@ -269,7 +279,12 @@ } .lookout-table-btn { - position: absolute; + grid-area: 1 / 1; + justify-self: end; + align-self: start; + /* `sticky` keeps the button in view should any ancestor still scroll the + whole host horizontally; the grid alignment fixes it to the top-right. */ + position: sticky; top: 6px; right: 6px; z-index: 2; diff --git a/versions.json b/versions.json index 04d27db..c5e77da 100644 --- a/versions.json +++ b/versions.json @@ -3,5 +3,6 @@ "1.1.2": "1.0.0", "1.1.3": "1.0.0", "1.1.4": "1.0.0", - "1.1.5": "1.0.0" + "1.1.5": "1.0.0", + "1.1.6": "1.0.0" }