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:
parent
d49a9df479
commit
d900d25482
2 changed files with 12 additions and 1 deletions
|
|
@ -23,3 +23,14 @@
|
||||||
.login-card > * {
|
.login-card > * {
|
||||||
margin: 0;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -93,7 +93,7 @@ function LoginInProgress({ session, onDone }: { session: SessionView | null; onD
|
||||||
<p class="status-needs-login">◌ L0G1N 1N PR0GRESS</p>
|
<p class="status-needs-login">◌ L0G1N 1N PR0GRESS</p>
|
||||||
{session?.url ? (
|
{session?.url ? (
|
||||||
<>
|
<>
|
||||||
<p>
|
<p class="login-url">
|
||||||
▶{' '}
|
▶{' '}
|
||||||
<a href={session.url} target="_blank" rel="noreferrer">
|
<a href={session.url} target="_blank" rel="noreferrer">
|
||||||
{session.url}
|
{session.url}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue