Skip to content

fix: keep suggestion popup within viewport - #4079

Open
escape0707 wants to merge 1 commit into
Automattic:masterfrom
escape0707:codex/max-width-popup-positioning
Open

fix: keep suggestion popup within viewport#4079
escape0707 wants to merge 1 commit into
Automattic:masterfrom
escape0707:codex/max-width-popup-positioning

Conversation

@escape0707

Copy link
Copy Markdown

Note

This pull request was developed with AI assistance. The submitter reviewed the implementation and tests before submission.

Summary

  • Conservatively right-align suggestion popups whose configured maximum width would cross the viewport's right margin.
  • Keep positioning fully represented in the virtual DOM, including an 8 px margin and the matching transform origin.
  • Include padding and borders within the 420 px maximum width and add a Firefox regression test.

Design decisions

I considered measuring the rendered popup and then adjusting the real DOM. That would use the popup's exact width, but .harper-container is owned by virtual-dom; changing it outside the VNode would allow the cached virtual tree and real DOM to disagree and require extra synchronization.

I also prototyped a two-pass virtual-DOM approach: render a provisional left-aligned VNode, measure its real DOM, then create and patch a right-aligned VNode when necessary. That preserves virtual/real DOM consistency, but it adds another render and VNode construction and requires preserving child and hook identity to avoid unnecessary lifecycle work.

This PR instead uses the existing 420 px maximum width as a conservative pre-render estimate. It stays single-pass and declarative, with no layout measurement. A short popup near the right edge can be right-aligned even if its rendered content would have fit; that is an accepted tradeoff for the smaller implementation and lower runtime overhead.

Testing

  • pnpm exec biome check packages/lint-framework/src/lint/SuggestionBox.ts packages/chrome-plugin/tests/simple_textarea.spec.ts
  • pnpm --dir packages/lint-framework build
  • pnpm --dir packages/chrome-plugin zip-for-firefox
  • Targeted Firefox Playwright regression test: 3 passed
  • Firefox simple_textarea.spec.ts: 24 passed, 6 skipped

Fixes #3972

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.

[BUG] Correction overlay displays outside of browser viewport

1 participant