The grip `::` and the "+" inserter were positioned at
`block.rect.left - 28..32` — fine in theory but the content area
had symmetric `padding-inline` so that math landed the overlays in
empty body space outside the editor box. User-visible result: the
left band had no width, the grip dragged on/off the edge unevenly,
and the click target felt invisible.
Fix: dedicate a visible rail of `2.5rem` (~40px) on the side
OPPOSITE the drawer, by switching the content + placeholder from
symmetric `padding-inline` to an asymmetric pair
(`padding-inline-start` + `padding-inline-end`). New token
`--_words-rail-px` is added to one of those sides per drawer
position.
- Drawer on RIGHT (default): rail is on the LEFT — content's
`padding-inline-start` becomes `content-px + rail-px`. The grip
at `block.rect.left - 32` now lands inside that visible band
(≈ 24-52 px from the editor's left edge), with the inserter "+"
button at -28 alongside it. Block text starts 56 px from the
editor's left edge.
- Drawer on LEFT: mirrored — the asymmetric padding flips via
`[data-words]:has([data-words-drawer][data-side='left']) >
[data-words-content]` so the rail moves to the inline-end side
where the overlays now render.
No JS changes needed — the existing geometry-based positioning
(`block.rect.left - 32`, `seam.left - 28` for the "+", with the
drawer-side detection added in an earlier commit) automatically
lands in the new band because `block.rect.left` shifted right by
the rail width.
Verified in browser: hovering anywhere over a paragraph reveals
the grip at the expected band position, with no flicker, and the
hit area is comfortably wide for a click.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dev
5a3029e589