ComfyUI_frontend

mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-24 14:45:36 +00:00

Files

Alexander Brown 1ab63807e9 fix: reserve scrollbar gutter on textareas to prevent hover reflow (#12280 )

*PR Created by the Glary-Bot Agent*

---

Adds the Tailwind 4.3 `scrollbar-gutter-stable` utility to the shared
shadcn `Textarea` wrapper and the `ModelInfoPanel` description textarea
so the layout no longer shifts when a vertical scrollbar appears on
hover or focus.

The wrapper edit propagates to all four consumers (`WidgetTextarea`,
`WidgetMarkdown`, `ComfyHubDescribeStep`, `ComfyHubCreateProfileForm`).
The `ModelInfoPanel` site uses a native `<textarea>` that bypasses the
wrapper, so it is fixed inline.

The `overflow-hidden hover:overflow-auto` performance pattern from
#10804 is intentionally preserved.

## Verification

- Typecheck, eslint, oxlint, oxfmt, stylelint clean on changed files
- `Textarea.test.ts`, `WidgetTextarea.test.ts`,
`WidgetMarkdown.test.ts`, `ComfyHubDescribeStep.test.ts`,
`ModelInfoPanel.test.ts` — all 68 tests pass
- `pnpm build` succeeds; the production CSS bundle contains the
`scrollbar-gutter:stable` rule
- Storybook (`UI/Textarea`): confirmed
`getComputedStyle(textarea).scrollbarGutter === 'stable'` on Default,
WithLabel, and overflowing-content scenarios

Fixes FE-697

## Screenshots

![Default Textarea story with scrollbar-gutter: stable
applied](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/be88568f9650862f90204bac94d0f79bf00a04fbfd32d37fcd46ad3c1fd3307b/pr-images/1778801341192-90974ee3-876c-4b1d-844c-487f687d80cd.png)

![Focused textarea showing vertical scrollbar with stable
gutter](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/be88568f9650862f90204bac94d0f79bf00a04fbfd32d37fcd46ad3c1fd3307b/pr-images/1778801341517-a6f52715-3ed8-4854-919e-02b5667f28b7.png)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12280-fix-reserve-scrollbar-gutter-on-textareas-to-prevent-hover-reflow-3606d73d3650816f9947e20134abf59e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

2026-05-15 01:48:35 +00:00

bypass.spec.ts-snapshots

fix: reserve scrollbar gutter on textareas to prevent hover reflow (#12280 )

2026-05-15 01:48:35 +00:00

colors.spec.ts-snapshots

fix: reserve scrollbar gutter on textareas to prevent hover reflow (#12280 )

2026-05-15 01:48:35 +00:00

error.spec.ts-snapshots

fix: highlight missing input slots on Vue nodes (#11950 )

2026-05-05 14:10:35 +00:00

lod.spec.ts-snapshots

Speed: Remove some optimizations that weren't optimizing (#6209 )