From d900d25482a8c1aa10804a2cf276cd6c63635257 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 31 Aug 2026 19:24:42 +0200
Subject: [PATCH] agent web UI: wrap the OAuth login URL instead of letting it
 overflow the card

claude's real OAuth URL is one long unbroken query-string token, no
whitespace for the browser to break on. Without overflow-wrap the
<a> just kept going past the login card's right edge instead of
wrapping at the card's bounded width (mara reported this with a
screenshot). overflow-wrap: anywhere lets it break mid-token as a
last resort, scoped to just the URL line (.login-url) rather than
the whole card.
---
 frontend/packages/agent/src/components/LoginFlow.css | 11 +++++++++++
 frontend/packages/agent/src/components/LoginFlow.tsx |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/agent/src/components/LoginFlow.css b/frontend/packages/agent/src/components/LoginFlow.css
index c2ce6018..620afc1b 100644
--- a/frontend/packages/agent/src/components/LoginFlow.css
+++ b/frontend/packages/agent/src/components/LoginFlow.css
@@ -23,3 +23,14 @@
 .login-card > * {
   margin: 0;
 }
+/* claude's real OAuth URL is one long unbroken token (a query string
+   with no whitespace) — without this it doesn't wrap at the card's
+   bounded width (.agent-status-overlay caps at 44em) and instead
+   overflows straight past the card's right edge (mara reported this
+   with a screenshot). `overflow-wrap: anywhere` lets the
+   browser break mid-token as a last resort, same as any other
+   long-URL-in-a-narrow-column case — `word-break: break-all` is the
+   older alternative but breaks more eagerly than needed here. */
+.login-url {
+  overflow-wrap: anywhere;
+}
diff --git a/frontend/packages/agent/src/components/LoginFlow.tsx b/frontend/packages/agent/src/components/LoginFlow.tsx
index c74c3c1b..cb9d7b2d 100644
--- a/frontend/packages/agent/src/components/LoginFlow.tsx
+++ b/frontend/packages/agent/src/components/LoginFlow.tsx
@@ -93,7 +93,7 @@ function LoginInProgress({ session, onDone }: { session: SessionView | null; onD
       <p class="status-needs-login">◌ L0G1N 1N PR0GRESS</p>
       {session?.url ? (
         <>
-          <p>
+          <p class="login-url">
             ▶{' '}
             <a href={session.url} target="_blank" rel="noreferrer">
               {session.url}