Sign in with Microsoft (PRD-118) — desktop layout for the auth pages
Aidan's note of 4 Nov: on a desktop the auth pages are one small column in a big empty page. These three layouts fill the page in different ways. All three put a Log in / Sign up switch at the top; the heading and the primary button follow the switch. Add #signup or #forgot to a concept URL to open it in that mode.
The idea: A split screen: a blue brand panel with the wordmark and three lines about the product fills the left half; the form column (Microsoft group, then the email form) sits in the right half. The app already has this layout file (auth-split-layout.tsx), unused.
- 👍 Works for every auth page with no form changes (forgot password, 2FA, verify email). The form stays one column, the right width for reading. The panel hides on a phone, so nothing moves.
- 👎 The panel needs real words and maybe an image from marketing. The Microsoft button is no more prominent than today.
The idea: One wide card on a grey page. Left: a tinted "Work at SBA?" column with the Microsoft button. Right: the email or invite-code form. Forgot password and the other pages use the same card at one column.
- 👍 Reads as two clear ways in. The Microsoft way gets the first position, which fits 40 of 58 users. No marketing copy needed.
- 👎 Register (5 fields) leaves the left column mostly empty. Columns stack on a phone, so the order changes. Pages without Microsoft look thinner.
Layout C — Microsoft inside the brand panel
Open full ↗
The idea: Layout A, but the Microsoft block is a white card inside the blue panel ("SBA staff"), and the right column holds only the email form.
- 👍 The two ways in are far apart, so nobody mixes them up. The right column is as short as the page is today.
- 👎 The main action for most users sits on a decorative panel, where people expect no controls. On a phone the panel is hidden, so the button has to jump back into the form column; two positions for one button.
