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.
This commit is contained in:
iris 2026-08-31 19:24:42 +02:00
commit d900d25482
2 changed files with 12 additions and 1 deletions

View file

@ -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;
}

View file

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