feat: reposition search error toast to top-center#295
Open
rattnak wants to merge 3 commits into
Open
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughMoves the "not in schema" error toast from an in-tree bottom position to a React portal at the top-center of the viewport, using fixed positioning, responsive top offsets, accessibility attributes, and a high z-index to avoid overlap with mobile zoom controls. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GraphView
participant DocumentBody as "document.body (Portal Target)"
User->>GraphView: trigger search -> not-in-schema error
GraphView->>DocumentBody: createPortal(render error toast)
DocumentBody-->>User: display top-center toast (fixed, high z-index)
User->>DocumentBody: click close button
DocumentBody->>GraphView: dispatch close callback (setShowErrorPopup(false))
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Preview Deployed!
Last updated at 2026-04-06T00:41:49Z |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/GraphView.tsx (1)
407-415: Add alert semantics for better accessibility.This error toast should expose live-region semantics, and the close button should have an explicit accessible label.
♿ Suggested accessibility tweak
- <div className="fixed top-[120px] sm:top-[100px] left-1/2 -translate-x-1/2 flex gap-2 px-2 py-1 bg-red-500 text-white rounded-md shadow-lg z-[9999]"> + <div + role="alert" + aria-live="assertive" + className="fixed top-[120px] sm:top-[100px] left-1/2 -translate-x-1/2 flex gap-2 px-2 py-1 bg-red-500 text-white rounded-md shadow-lg z-[9999]" + > <div className="text-sm font-medium tracking-wide font-roboto"> {errorMessage} </div> <button + aria-label="Dismiss search error" className="cursor-pointer" onClick={() => setShowErrorPopup(false)} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/GraphView.tsx` around lines 407 - 415, The error toast lacks ARIA semantics and an accessible label for the close control: add live-region attributes (e.g., role="alert" and aria-live="assertive" with aria-atomic="true") to the container that renders errorMessage, and give the close button a clear accessible name (e.g., add aria-label="Close error" and ensure it is a real button element with type="button") so the CgClose control and setShowErrorPopup handler are reachable and announced by assistive tech..changeset/tangy-words-flash.md (1)
5-5: Polish changelog sentence grammar for clarity.Current line mixes verb forms; a small wording cleanup will read better in release notes.
✍️ Suggested wording
-move "not in schema" error toast to top-center via React portal by preventing overlap with zoom controls on mobile and keeps the toast near the search bar on desktop. +Move the "not in schema" error toast to the top-center via a React portal to prevent overlap with zoom controls on mobile and keep it near the search bar on desktop.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.changeset/tangy-words-flash.md at line 5, The changelog line is grammatically awkward; update the sentence in .changeset/tangy-words-flash.md so it reads clearly and uses parallel verb forms—for example: "Move the 'not in schema' error toast to the top-center via a React portal to prevent overlap with mobile zoom controls and to keep the toast near the search bar on desktop." Ensure the quoted phrase 'not in schema' remains intact and that the sentence uses consistent tense and conjunctions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.changeset/tangy-words-flash.md:
- Line 5: The changelog line is grammatically awkward; update the sentence in
.changeset/tangy-words-flash.md so it reads clearly and uses parallel verb
forms—for example: "Move the 'not in schema' error toast to the top-center via a
React portal to prevent overlap with mobile zoom controls and to keep the toast
near the search bar on desktop." Ensure the quoted phrase 'not in schema'
remains intact and that the sentence uses consistent tense and conjunctions.
In `@src/components/GraphView.tsx`:
- Around line 407-415: The error toast lacks ARIA semantics and an accessible
label for the close control: add live-region attributes (e.g., role="alert" and
aria-live="assertive" with aria-atomic="true") to the container that renders
errorMessage, and give the close button a clear accessible name (e.g., add
aria-label="Close error" and ensure it is a real button element with
type="button") so the CgClose control and setShowErrorPopup handler are
reachable and announced by assistive tech.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9eb65a4c-ff8a-4a7b-a1d2-098d70d0ab89
📒 Files selected for processing (2)
.changeset/tangy-words-flash.mdsrc/components/GraphView.tsx
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
1 participant
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.
Summary
Repositions the "not in schema" error toast from a fixed bottom-left position to a top-center portal-rendered toast. On mobile, the previous position overlapped with the zoom controls; on desktop, it appeared far from the search bar. The toast now renders via createPortal outside the ReactFlow DOM context with fixed positioning, keeping it visible and unobstructed on all screen sizes.
What kind of change does this PR introduce
Bug fix / UI improvement (no new features or breaking changes.)
Issue Number
Closes #261
Screenshots/Video
Screen.Recording.2026-04-05.at.8.28.08.PM.mov
Does this PR introduce a breaking change?
No
If relevant, did you update the documentation?
No
Summary by CodeRabbit