fix: prevent Settings dialog deformation on long error messages - #219
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Walkthrough
ChangesSettings text layout
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
interface/src/routes/Settings.tsx (1)
714-723: Consider applying the same overflow fix consistently and extracting a shared component.The five message blocks in
ApiKeysSection(Line 715),ServerSection(Line 878),WorkerLogsSection(Line 997),OpenCodeSection(Line 1222), andConfigFileSection(Line 1419) are structurally identical to the two fixed ones but still lackmin-w-0 break-words. A long API error response containing a URL in those sections would reproduce the same overflow bug.Extracting a small shared component would eliminate all the duplication and make this fix universal in one place:
♻️ Suggested shared component + usage
+function MessageBanner({ text, type }: { text: string; type: "success" | "error" }) { + return ( + <div + className={`rounded-md border px-3 py-2 text-sm min-w-0 break-words ${ + type === "success" + ? "border-green-500/20 bg-green-500/10 text-green-400" + : "border-red-500/20 bg-red-500/10 text-red-400" + }`} + > + {text} + </div> + ); +}Then replace each repetition, e.g. in
ApiKeysSection:-{message && ( - <div - className={`mt-4 rounded-md border px-3 py-2 text-sm ${ - message.type === "success" - ? "border-green-500/20 bg-green-500/10 text-green-400" - : "border-red-500/20 bg-red-500/10 text-red-400" - }`} - > - {message.text} - </div> -)} +{message && <div className="mt-4"><MessageBanner text={message.text} type={message.type} /></div>}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@interface/src/routes/Settings.tsx` around lines 714 - 723, Several identical message blocks in ApiKeysSection, ServerSection, WorkerLogsSection, OpenCodeSection, and ConfigFileSection are missing the overflow guard (min-w-0 break-words) and should be unified: create a small shared component (e.g., MessageBox or AlertMessage) that accepts props like type and text and applies the existing className plus "min-w-0 break-words" and then replace the inline divs in the five sections with this component (update usages in ApiKeysSection, ServerSection, WorkerLogsSection, OpenCodeSection, ConfigFileSection to pass message.type and message.text).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@interface/src/routes/Settings.tsx`:
- Around line 714-723: Several identical message blocks in ApiKeysSection,
ServerSection, WorkerLogsSection, OpenCodeSection, and ConfigFileSection are
missing the overflow guard (min-w-0 break-words) and should be unified: create a
small shared component (e.g., MessageBox or AlertMessage) that accepts props
like type and text and applies the existing className plus "min-w-0 break-words"
and then replace the inline divs in the five sections with this component
(update usages in ApiKeysSection, ServerSection, WorkerLogsSection,
OpenCodeSection, ConfigFileSection to pass message.type and message.text).
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
jamiepine
left a comment
jamiepine
left a comment
There was a problem hiding this comment.
Relevance-checked: the unwrapped error boxes are still at Settings.tsx:885/901 on current main. CI green on repaired toolchain.
2 participants
Title: fix: prevent error message overflow in API modal
Description: This PR fixes a UI bug where long error strings, such as billing URLs, were overflowing the modal's horizontal boundaries. By applying
overflow-hidden min-w-0 break-words, we ensure that the container respects its parent width regardless of the text length.Note
This fix adds text wrapping and overflow handling to error and success message containers in the Settings component. The change applies three CSS utilities—
overflow-hidden,min-w-0, andbreak-words—to both the test result and message divs to prevent long text strings from breaking the modal layout.Written by Tembo for commit 39f75c7d.