SIGN IN SIGN UP

fix(ui): keep the composer text overlay aligned with the textarea when a classic scrollbar appears (#1530)

* fix(ui): keep the composer text overlay aligned with the textarea when a classic scrollbar appears

The skill-reference composer paints its glyphs with a mirror <div> over a
transparent-text textarea; only the caret still comes from the textarea. When a
layout-consuming vertical scrollbar appears (Windows/Linux classic scrollbars,
~12px under the app's `scrollbar-width: thin`), the textarea's line box narrows
by the scrollbar width while the `overflow: hidden` mirror keeps its full width,
so from the first line whose wrap point differs the caret is drawn away from the
glyph it belongs to.

Measure the scrollbar in the existing scroll/value sync and mirror it onto the
overlay's right padding, with a ResizeObserver so a resize that adds or drops
the scrollbar without a keystroke re-syncs too. Base padding and border widths
are read from the textarea's computed style rather than hardcoded. When the
measured width is 0 (macOS/iOS overlay scrollbars, touch) nothing is written at
all, so those surfaces keep byte-identical DOM.

Fixes #1525

* test(ui): cover the composer overlay gutter sync

Guards the four failures that matter: the mirror not picking up the scrollbar
width, an inline style being written where the scrollbar takes no layout
(macOS/touch must stay unchanged), a stale gutter left behind when the
scrollbar goes away, and the ResizeObserver path that catches a resize with no
keystroke. happy-dom has no layout engine, so the textarea's box metrics are
stubbed.
M
Michael Ramos committed
01eda979b476abf6a375c20367957eefd806fd08
Parent: 4ab8611
Committed by GitHub <noreply@github.com> on 9/15/2026, 4:00:14 AM