d900d25482
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.
36 lines
1.6 KiB
CSS
36 lines
1.6 KiB
CSS
/* .login-card — one elevated-surface card for the whole login-recovery
|
|
overlay, replacing the old markup's per-`<p>`/`<form>` boxing
|
|
(`agent.css`'s `.agent-status-overlay > *`, still needed there
|
|
verbatim since app.js's still-live markup depends on it until the
|
|
index.html cutover — this file coexists with it rather than editing
|
|
it). Same visual language as `Dropdown`'s `.ui-dropdown`
|
|
(`@hive/shared/dropdown/Dropdown.css`) — background/border/radius/
|
|
shadow values match exactly, so this reads as the same "popup" family
|
|
as every other floating surface in the app, just laid out as a static
|
|
block instead of an anchored, position:absolute menu (that part of
|
|
`Dropdown` is specific to hanging under a trigger and doesn't apply
|
|
here — `.agent-status-overlay` already centres this card itself). */
|
|
.login-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6em;
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.5em;
|
|
box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
|
|
padding: 1em 1.2em;
|
|
}
|
|
.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;
|
|
}
|