fix: prevent Settings dialog deformation on long error messages

[Joelp03]

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 word-break: break-all, we ensure that the container respects its parent width regardless of the text length.

Note

Adds break-all CSS class to two message container elements in the Settings component to prevent long error messages from overflowing their parent container. This is a targeted fix that applies to both success and error message displays in the Settings dialog.

_{Written by Tembo for commit d487269.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8582124 and d487269.

📒 Files selected for processing (1)

• interface/src/routes/Settings.tsx

---

Walkthrough

Added the CSS class break-all to two conditional warning/message blocks in Settings.tsx to enable line-breaking within those divs. No changes to logic or control flow.

Changes

Cohort / File(s)	Summary
Styling Updates interface/src/routes/Settings.tsx	Added CSS class break-all to two conditional warning/message blocks to enable text line-breaking behavior within those elements.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main UI fix: preventing Settings dialog deformation caused by long error messages, which aligns perfectly with the changeset.
Description check	✅ Passed	The description is directly related to the changeset, explaining the UI bug fix with context about long error messages overflowing modal boundaries and the CSS solution applied.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[tembo]

break-all fixes overflow but it also wraps normal text mid-word. break-words usually still handles long URLs while keeping typical error messages more readable.

Suggested change

	className={`rounded-md border px-3 py-2 text-sm break-all ${
	className={`rounded-md border px-3 py-2 text-sm break-words ${