Wrap button and option text when content overflows#12
Conversation
The shared `.kma-button` rule used `white-space: nowrap` + a fixed height, so long MFA/SSO/sign-in option labels (e.g. "Get a verification code from the Google Authenticator app") overflowed the card. Switch buttons to `min-height` and `overflow-wrap: anywhere` so labels wrap and the row grows to fit. Extend two demo MFA options with longer labels so the wrapping case is exercised when scrubbing through States.
|
Firetiger deploy monitoring skipped This PR didn't match the auto-monitor filter configured on your GitHub connection:
Reason: PR modifies UI styling in managed-auth-react package, not kernel API endpoints or Temporal workflows as specified in the filter. To monitor this PR anyway, reply with |
Configures Vercel to build the library before the demo app and output from packages/demo/dist, so workspace:* dependency resolves correctly in CI. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| gap: 8px; | ||
| padding: 0 1rem; | ||
| height: 3rem; | ||
| min-height: 3rem; |
There was a problem hiding this comment.
Text wrapping with overflow-wrap: anywhere does not work reliably on inline-flex containers without explicit width constraints
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "buildCommand": "bun run --filter @onkernel/managed-auth-react build && cd packages/demo && bun run build", | |||
There was a problem hiding this comment.
| "buildCommand": "bun run --filter @onkernel/managed-auth-react build && cd packages/demo && bun run build", | |
| "buildCommand": "bun run --filter @onkernel/managed-auth-react build && (cd packages/demo && bun run build)", |
The buildCommand in vercel.json fails when trying to execute cd packages/demo after bun run --filter @onkernel/managed-auth-react build, causing the Vercel build to fail with "No such file or directory"
1 participant
Summary
.kma-buttonusedwhite-space: nowrapplus a fixedheight, so longMFA / SSO / sign-in option labels overflowed the card on narrower
viewports.
min-heightandoverflow-wrap: anywhereso labels wrapand the row grows to fit. Also added
padding+min-width: 0on.kma-sso-buttonso its label can shrink.Statestab →Awaiting Input — MFA only)with longer labels so the wrapping case is visible while scrubbing.
Before / After
Viewport
460x750,States→awaiting_input_mfa. The long totp label("Get a verification code from the Google Authenticator app") clipped
past the card on the right in the old build and now wraps cleanly to two
lines inside the row.
Test plan
bun run --filter '@onkernel/managed-auth-react' typecheckbun run --filter '@onkernel/managed-auth-react' buildbun run format:checkmfaOptionsrow now wraps inside the cardNote
Low Risk
Low risk styling-only changes that adjust button sizing/wrapping; main risk is minor visual layout shifts across consumers.
Overview
Prevents long MFA/SSO labels from overflowing narrow viewports by switching buttons from fixed
heighttomin-heightand enabling text wrapping viaoverflow-wrap: anywhere(removingwhite-space: nowrap).Tweaks SSO button layout to better accommodate wrapping (
paddingand new.kma-sso-button__label { min-width: 0; }), extends demo MFA mock labels to exercise the wrap case, and adds avercel.jsonto build the library + demo with Bun.Reviewed by Cursor Bugbot for commit fa3f32e. Bugbot is set up for automated code reviews on this repo. Configure here.