Skip to content

fix: wide-table full-screen button placement & clone chrome#20

Merged
jphan32 merged 2 commits into
devfrom
fix/wide-table-fullscreen-button
Jun 24, 2026
Merged

fix: wide-table full-screen button placement & clone chrome#20
jphan32 merged 2 commits into
devfrom
fix/wide-table-fullscreen-button

Conversation

@jphan32

@jphan32 jphan32 commented Jun 24, 2026

Copy link
Copy Markdown
Member

What

Fixes two wide-table issues reported against the inline/full-screen table view.

1. Full-screen button floated off-screen (right side hidden)

When a table is wider than the column and an ancestor is shrink-to-fit or horizontally scrolling (Obsidian's Live Preview .cm-table-widget), .lookout-table-host ballooned to the table's full intrinsic width, taking the absolutely-positioned button with it — so it ended up at the table's hidden far-right edge.

The host is now a 1×1 grid (grid-template-columns: minmax(0, 1fr)) with the scroller at min-width: 0, which caps the host at the visible column width and keeps the table's overflow inside our own scroller. The button shares the same grid cell, pinned to the top-right via justify-self/align-self, with position: sticky as a safety net.

2. Stray "⋮" marks in each cell in full-screen

Those were Obsidian's Live Preview table-editor controls — the column handle button (.table-col-btn) and the row drag grip (.table-row-drag-handle) — carried into the full-screen clone by cloneNode(true). They're now stripped from the clone only; the live inline table is untouched.

Verification

  • npm run lint, npm run build (type-check + bundle), node --check main.js, node scripts/validate.mjs — all green.
  • The button-placement CSS technique was validated in headless Chromium (same engine as Obsidian): button stays at a stable top-right corner before/during/after horizontal scroll, in both the normal and ballooned-ancestor layouts.
  • ⚠️ Not yet verified in a real vault. This plugin has no automated tests; CLAUDE.md asks for manual checks in both Reading view and Live Preview. Please confirm in a vault with a wide table.

Notes

  • Class names (.table-col-btn, .table-row-drag-handle) were confirmed against Obsidian's official CSS-variable docs and the kepano/obsidian-minimal theme rather than guessed.
  • The screenshot showed only the grip dots; if other editor controls (e.g. row/column "+" add buttons) appear in some setups, the strip selector may need extending.

🤖 Generated with Claude Code

jphan32 and others added 2 commits June 24, 2026 13:16
… in clone

Two wide-table issues:

- The full-screen button floated off-screen at the table's hidden far-right
  edge: under a shrink-to-fit / horizontally-scrolling ancestor (Obsidian's
  `.cm-table-widget`), `.lookout-table-host` ballooned to the table's intrinsic
  width and the absolutely-positioned button went with it. The host is now a
  1x1 grid (`minmax(0, 1fr)` + scroller `min-width: 0`) so it caps at the
  visible column width; the button shares the cell, pinned top-right with
  `position: sticky` as a safety net.
- Full-screen tables showed stray "⋮" marks per cell: Obsidian's Live Preview
  table-editor chrome (`.table-col-btn`, `.table-row-drag-handle`) was carried
  into the clone by cloneNode. Strip it from the clone only (the live inline
  table is untouched).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zhPq4Kj3TYSkPCuY4ovmj
…clone

The earlier table-chrome fix stripped only `.table-col-btn` and
`.table-row-drag-handle`, so the horizontal ":::" column drag grip
(`.table-col-drag-handle`) and the row "+" menu button (`.table-row-btn`)
survived the clone and still showed as stray marks in full-screen.

Verified the full control set against the running Obsidian 1.12.7 table
widget; strip all four editor-chrome classes on both axes (clone only,
the live inline table is untouched).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@jphan32

jphan32 commented Jun 24, 2026

Copy link
Copy Markdown
Member Author

E2E in a real vault — follow-up fix

Verified in the DOT vault (~/Projects/DOT.docs-of-truth, Obsidian 1.12.7) by deploying this branch's main.js/styles.css into .obsidian/plugins/lookout/.

Finding: fix #2 was incomplete. The earlier strip selector (.table-col-btn, .table-row-drag-handle) missed two of the four Live Preview table-editor controls, so the horizontal ::: column drag grip still showed in the full-screen clone.

Confirmed the full control set against the running Obsidian 1.12.7 table widget (obsidian-1.12.7.asar):

Control Mark Before Now
.table-col-btn column +/menu stripped stripped
.table-row-drag-handle vertical row grip stripped stripped
.table-col-drag-handle horizontal ::: column grip missed stripped
.table-row-btn row +/menu missed stripped

Pushed 95410ef: extend TABLE_EDITOR_CHROME to all four classes (clone only — the live inline table is untouched). npm run lint, npm run build, node --check main.js, node scripts/validate.mjs all green. This is exactly the "column '+' add buttons may need extending" case the PR description flagged.

@jphan32 jphan32 merged commit 5008242 into dev Jun 24, 2026
1 check passed
@jphan32 jphan32 deleted the fix/wide-table-fullscreen-button branch June 24, 2026 04:36
This was referenced Jun 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant