[4645] fix(frontend): wrap API key inside the create-key modal#4746
[4645] fix(frontend): wrap API key inside the create-key modal#4746Koushik-Salammagari wants to merge 1 commit into
Conversation
The API-key creation success popup rendered the full key in a flex row without any break rule. A real key is an 8-char prefix plus a 64-char hex secret (one '.' separator), so the unbreakable hex tail forced the flex item past its container and the key overflowed the modal edge. Let the key wrap within the available width and keep the copy icon pinned beside it: - key span: min-w-0 + break-all so it can shrink and break mid-token - icon span: shrink-0 so it is never squeezed out - row: items-start so the icon aligns to the first line when wrapping Fixes Agenta-AI#4645
|
@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. |
dosubot
Bot
added
the
size:XS
|
|
|
✅ Thanks @Koushik-Salammagari! This PR now meets the contribution requirements and has been reopened. A maintainer will review it soon. |
github-actions
Bot
added
the
incomplete-pr
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Disabled knowledge base sources:
📝 WalkthroughSummary by CodeRabbit
WalkthroughTwo small CSS utility class adjustments in ChangesAPI Key Success Message Layout
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes ✨ 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 |
github-actions
Bot
removed
the
incomplete-pr
2 participants
Summary
The API-key creation success popup (
modal.successviaAlertPopup) rendered the full key in aflexrow 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 defaultmin-width: auto, so it could not shrink below its content, and it had noword-break, so the long token never wrapped.Fix (in
web/oss/src/components/pages/settings/APIKeys/APIKeys.tsx):min-w-0 break-allso the flex item can shrink and the token can break mid-string within the available widthshrink-0so it is never squeezed outitems-startso the copy icon aligns to the first line when the key wrapsNo behavior change beyond layout; the same key string and copy action are preserved.
Testing
Verified locally
{8-char prefix}.{64 hex chars}) at the realmodal.successwidth (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-fixinweb/— 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 — the created API key now wraps inside the success modal instead of overflowing past its right edge:
Checklist