[4645] fix(frontend): wrap API key inside the create-key modal

[Koushik-Salammagari]

Summary

The API-key creation success popup (modal.success via AlertPopup) rendered the full key in a flex row with no break rule. A real key is an 8-character prefix plus a 64-character hex secret joined by a single . ({prefix}.{secrets.token_hex(32)}), so the unbreakable hex tail kept the flex item at its full intrinsic width and the key overflowed past the modal edge — the end of the key and the copy icon were clipped out of view.

Root cause: the key <span> was a flex item with the default min-width: auto, so it could not shrink below its content, and it had no word-break, so the long token never wrapped.

Fix (in web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx):

• key span → min-w-0 break-all so the flex item can shrink and the token can break mid-string within the available width
• copy-icon span → shrink-0 so it is never squeezed out
• row → items-start so the copy icon aligns to the first line when the key wraps

No behavior change beyond layout; the same key string and copy action are preserved.

Testing

Verified locally

• Reproduced the layout with a faithful key ({8-char prefix}.{64 hex chars}) at the real modal.success width (650px). Before: the key is clipped at the modal's right edge and the copy icon is pushed out of view. After: the key wraps onto a second line, fully visible, with the copy icon beside the first line.
• pnpm lint-fix in web/ — passes with no ESLint warnings or errors.

Added or updated tests

N/A — CSS/layout-only change to a single presentational block; there is no existing test harness around this modal.

QA follow-up

Confirm wrapping on the live create-key flow across light/dark themes and narrow viewports. No data conditions involved.

Demo

Before / after (key wrapping inside the create-key success modal):

Checklist

• I have included a video or screen recording for UI changes, or marked Demo as N/A
• Relevant tests pass locally
• Relevant linting and formatting pass locally
• I have signed the CLA, or I will sign it when the bot prompts me

[vercel]

@Koushik-Salammagari is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[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 @Koushik-Salammagari, thanks for opening a pull request. 🙏

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

• This PR changes functional code (SDK, API, or frontend) but includes no demo. Add a screenshot or short video of the change. Only test-only, docs-only, or chore changes may skip it.

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.

[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: b324a07b-10bc-48ce-8a1c-3ba2320e834a

📥 Commits

Reviewing files that changed from the base of the PR and between a97e608 and 44dd417.

📒 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
  • Enhanced the visual presentation of the newly created API key success message in the Settings page. Improved layout spacing and alignment for better readability. Refined text wrapping behavior for optimal display of key information. Adjusted the copy button icon positioning for improved usability and visual consistency.

Walkthrough

Two small CSS utility class adjustments in APIKeys.tsx: the flex container displaying a newly created API key gains updated alignment/spacing and truncation classes, and the copy icon's wrapping span receives a shrink-0 class to prevent it from shrinking within the message row.

Changes

API Key Success Message Layout

Layer / File(s)	Summary
Success message flex layout and copy icon shrink fix web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx	Updates flex alignment, spacing, and truncation utility classes on the key text container; adds shrink-0 to the copy icon span to constrain its layout behavior in the message row.

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