From 6bcb7fd1ff1e580f36d77a858cd60579ff3897fd Mon Sep 17 00:00:00 2001
From: masnwilliams <43387599+masnwilliams@users.noreply.github.com>
Date: Thu, 14 May 2026 22:00:49 +0000
Subject: [PATCH 1/2] Allow button and option text to wrap

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.
---
 packages/demo/src/States.tsx                      | 12 ++++++++++--
 packages/managed-auth-react/src/styles/styles.css | 13 +++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/demo/src/States.tsx b/packages/demo/src/States.tsx
index 634927f..39fc0d1 100644
--- a/packages/demo/src/States.tsx
+++ b/packages/demo/src/States.tsx
@@ -45,9 +45,17 @@ const mockFields: DiscoveredField[] = [
 // `switch` is deliberately first — UnifiedAuthForm sorts it to the bottom,
 // so this proves the sort behavior works.
 const mockMFAOptions: MFAOption[] = [
-  { type: "switch", description: "Pick a different verification method" },
+  {
+    type: "switch",
+    label: "Try another way",
+    description: "Pick a different verification method",
+  },
   { type: "sms", target: "•••• 4242" },
-  { type: "totp", description: "Use your authenticator app" },
+  {
+    type: "totp",
+    label: "Get a verification code from the Google Authenticator app",
+    description: "Use your authenticator app",
+  },
   { type: "push", target: "iPhone 15 Pro" },
 ];
 
diff --git a/packages/managed-auth-react/src/styles/styles.css b/packages/managed-auth-react/src/styles/styles.css
index ff3a2d5..3f49b3f 100644
--- a/packages/managed-auth-react/src/styles/styles.css
+++ b/packages/managed-auth-react/src/styles/styles.css
@@ -373,10 +373,10 @@
   justify-content: center;
   gap: 8px;
   padding: 0 1rem;
-  height: 3rem;
+  min-height: 3rem;
   line-height: 1.2;
-  white-space: nowrap;
   text-align: center;
+  overflow-wrap: anywhere;
 }
 
 .kma-button:focus-visible {
@@ -398,7 +398,7 @@
 /* Slightly shorter primary button used inside forms — matches the
    previous hosted-ui form submit (`h-11` = 44px). */
 .kma-button--sm {
-  height: 2.75rem;
+  min-height: 2.75rem;
 }
 
 .kma-button--primary {
@@ -494,11 +494,16 @@
 
 .kma-sso-button {
   width: 100%;
-  height: 2.75rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
   font-size: var(--kma-font-size-lg);
   gap: 12px;
 }
 
+.kma-sso-button__label {
+  min-width: 0;
+}
+
 .kma-sso-button__icon {
   display: inline-flex;
   align-items: center;

From fa3f32e28d08255e41b911b9cdbc6f03908f81d0 Mon Sep 17 00:00:00 2001
From: Mason Williams <mason@onkernel.com>
Date: Fri, 15 May 2026 10:27:11 -0400
Subject: [PATCH 2/2] Add vercel.json for demo preview deployments

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>
---
 vercel.json | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 vercel.json

diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..b425fff
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,6 @@
+{
+  "buildCommand": "bun run --filter @onkernel/managed-auth-react build && cd packages/demo && bun run build",
+  "outputDirectory": "packages/demo/dist",
+  "framework": "vite",
+  "installCommand": "bun install"
+}