From eb293b4e50c23c39093874ae89449bfbb65bb9d8 Mon Sep 17 00:00:00 2001 From: dev Date: Sun, 31 May 2026 14:09:06 +0200 Subject: [PATCH] fix(words): column inserter overlay only covers bottom strip on non-empty columns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The wrap was rect-matched to the whole column rect, which meant the `+` trigger (positioned at the bottom of the wrap, pointer-events:auto on hover) overlapped the column's TRAILING paragraph — the empty escape-hatch the engine auto-adds after atomic inserts (image, divider). Clicking on that paragraph to start typing hit the `+` trigger and opened the dropdown instead. Fix: for non-empty columns, position the wrap as a thin 28px strip at the column's bottom (where the `+` lives) instead of covering the whole column. The trailing paragraph above the strip is now clickable. Empty columns keep the full-column wrap (so the centered `+` invitation remains). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../words/words-column-inserter.svelte | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/uix/eidos/components/words/words-column-inserter.svelte b/src/uix/eidos/components/words/words-column-inserter.svelte index 90c5991fc..866cd0f3e 100644 --- a/src/uix/eidos/components/words/words-column-inserter.svelte +++ b/src/uix/eidos/components/words/words-column-inserter.svelte @@ -115,15 +115,30 @@ if (!ids) continue; const br = col.getBoundingClientRect(); if (br.bottom < cr.top + 4 || br.top > cr.bottom - 4) continue; + const empty = isColumnEmpty(col); + // Empty column → cover the whole column rect (large centered + // `+` is the invitation to start). Non-empty → only a thin + // strip at the bottom of the column. The wrap has + // pointer-events: none AND its trigger overlays the wrap area, + // so a tall non-empty wrap WOULD cover content blocks AND + // (more importantly) the auto-added trailing paragraph that + // follows atomic inserts (image / divider). Clicks intended + // for that paragraph would hit the `+` trigger instead, + // opening the dropdown when the user just wanted to type. + // The strip height matches the trigger button (~26px) + a + // small padding so it sits cleanly at the column bottom. + const stripH = 28; + const top = empty ? br.top - fr.top : br.bottom - fr.top - stripH; + const height = empty ? br.height : stripH; next.push({ columnsIdx: ids.columnsIdx, colIdx: ids.colIdx, - isEmpty: isColumnEmpty(col), + isEmpty: empty, rect: { - top: br.top - fr.top, + top, left: br.left - fr.left, width: br.width, - height: br.height + height } }); }