fix: prevent API key text overflow in create modal

[muhamedfazalps]

Summary

The API key created success modal displays the generated key in a monospace <span> with no text wrapping. Long API keys (40+ characters in monospace) overflow outside the 650px modal, making them unreadable and partially hiding the copy button.

Change

Added wordBreak: "break-all" to the API key display span's style object in web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx. This causes long keys to wrap to multiple lines within the modal instead of overflowing.

Testing

• The change is a single CSS property addition — no logic change.
• Existing behavior is preserved: the copy button, modal layout, and all other API key displays remain unchanged.
• Visual fix verified by inspecting the style change.

---

If this fix helped, consider buying me a coffee! ☕

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

Hi @muhamedfazalps, thanks for opening a pull request. 🙏

This PR was automatically closed because it does not yet meet our contribution requirements:

• The Summary section is missing or empty. Describe what changed and why using the PR template.

We ask for this so every change is documented and demonstrably tested before review.

How to get it reopened
Update the PR description (and add a demo recording if your change touches functional code). The bot reopens the PR automatically once the requirements are met. No need to open a new one.

See the Contributing guide and Creating your first PR. If you think this was closed in error, leave a comment and a maintainer will take a look.

[vercel]

@muhamedfazalps is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0359e8de-0922-4d21-85ba-17cdd68db230

📥 Commits

Reviewing files that changed from the base of the PR and between bbc9d12 and d57a4e1.

📒 Files selected for processing (1)

• web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Improved text wrapping for API keys in the settings interface to ensure long keys display properly without overflow.

Walkthrough

This PR fixes text overflow in the API key display modal by adding a wordBreak: "break-all" style property to the API key value span. The single-line change ensures long API keys wrap properly within the modal boundary instead of extending beyond it.

Changes

API Key Display Styling

Layer / File(s)	Summary
API key text wrapping fix web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx	Added wordBreak: "break-all" inline style to the API key value span to control line breaking for long key strings and prevent modal overflow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}