feat(react): keep the pending-replacement preview beside the text it previews#212
Merged
Conversation
…previews The preview popover was anchored to the staged range's bounding box. A selection taller than the viewport leaves no room on either side of that box, so collision handling flung the popover to the top of the viewport, detached from the text and overlapping the selection mid-range. Anchor it to the end of the staged range instead, and scroll that line into view with enough clearance below when a stage starts, so the popover opens by the last line of the selection with room to stream. Also label the accept control by what accepting does — "Replace selection" or "Insert below" per the staged mode — instead of an ambiguous "Accept", and let the website demo offer the opposite placement like a real host. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@maccman is attempting to deploy a commit to the ocavue's projects Team on Vercel. A member of the Team first needs to authorize it. |
commit: |
The mode-labeled accept button made the footer overflow the 24rem popup, wrapping button labels mid-word. Widen the popover to 30rem, mark the footer buttons nowrap, and let whole buttons wrap onto a second row when a narrow viewport leaves no room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Collaborator
Author
|
Follow-up commit: the mode-labeled accept button made the footer overflow the 24rem popup and wrap labels mid-word. Widened the popover to 30rem, made footer buttons |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Member
|
The UI looks off Preview link: https://meowdown-git-fork-maccman-ai-preview-ux-ocavues-projects.vercel.app/ 
|
ocavue
approved these changes
Jul 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Two UX issues with the pending-replacement preview (the AI-transform popover):
The popover detaches from long selections. It was anchored to the staged range's bounding box. A selection taller than the viewport leaves no room on either side of that box, so Floating UI's collision handling flung the popover to the top of the viewport — floating over unrelated UI and covering the selection mid-range:
"Accept" didn't say what it does. Whether accepting replaces the selection or inserts below it depends on the staged mode, which the button didn't surface.
Changes
PREVIEW_CLEARANCE) for the popover to stream below it — centering first, then nudging the nearest scrollable ancestor. Keyed on stage existence, so streamed text, range remaps, and retries never re-scroll.Testing
pnpm vitest --run --project '@meowdown/react (chromium)'— 150 tests pass, including a new test asserting the mode-dependent accept label.pnpm typecheckandpnpm lintpass.🤖 Generated with Claude Code