Drop the auth card frame on small viewports

[bigmoves]

What & why

Motivation for this came from here https://bsky.app/profile/aka.dad/post/3msoi46tp2d2s, also I think it does look better without the card on smaller screens. Could go either way though. The old UI was actually more like this.

--

On small viewports the authorization screens render a card inside a card: an opaque, rounded, ringed panel that occupies nearly the whole window, floating over a background image that is almost entirely hidden behind it. The frame costs horizontal space and reads as a shrunken desktop layout rather than one built for the size it's in.

The frame is now dropped in two independent steps.

Below sm (40rem) the card's surface, ring and radius go, along with the footer's fill and top border, and .auth-background swaps the branding image for the card surface — with no opaque card left to sit on, copy over a background image would be illegible. Content stays capped at max-w-sm.

Below xs (30rem) the content additionally runs edge to edge, and the footer is pinned to the bottom of the viewport with the content centred in the space above it.

The popup is the reason for two steps

@atproto/oauth-client-browser opens the authorization window at width=600,height=600 by default (browser-oauth-client.ts#L300), so the popup is already the dialog. Inside it the card was a card inside a card, and the branding image only ever showed as slivers down either side:

Collapsing the two steps into one breaks one case or the other: at sm alone, the 600px popup stretches its inputs to the full window width; at xs alone, the card comes back in the popup.

Phones

Sign-in — before / after (390px)

Password form — before / after (390px)

Dark mode — before / after (390px)

Above 40rem, nothing changes

The before and after screenshots at 700px and at 1280px are byte-identical.

Layout note

The footer is pinned to the bottom with the content centred above it, on phones only. Three vertical layouts were tried: centring the whole block (the desktop behaviour) left dead space above and below; top-aligning the content with a pinned footer looked right on the sign-in form but left a large void under the two-line error screen. What's here uses mt-auto on both the card's first child and the footer, which splits the free space evenly — the footer lands at the bottom and the content centres in what remains. That holds for both the error screen and the sign-up wizard.

Scope

AuthShell only, so this covers the authorization flow plus the error and cookie-error pages. The account-manager screens use AccountShell and are unaffected.

Checked at 390px and 430px, in a real 600×600 popup (sign-in, password, consent), and at the 480/640 boundaries; light and dark; and overflow at 390×520 and in the popup's consent screen, both of which scroll with nothing clipped.

Checklist

• pnpm build --force && pnpm verify passes
• Tests pass, and new behavior is covered by tests
• A changeset is included for every package this touches
• Written with the help of an LLM or coding agent? Say so here, and name the tooling.