Fix 2382: apply correct layout to password reset

[javiercoronadonarvaez]

Issue: #2382

Summary & Context

Fixes the password-reset (auth page) layout so tablet renders the two-column desktop layout instead of the mobile stack, and tightens up mobile spacing to match Figma. Changes live entirely in the shared auth-page.css, so they apply to every password-reset screen (and the other auth pages that reuse the layout).

• Figma link:
  • Tablet: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=5760-24729
  • Mobile: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=5760-24758
• Link to components/page: localhost:8000/v3/accounts/password/reset/ (also /done/, /key/<uidb36>-<key>/, /key/done/)

Changes

• Tablet: moved the single-column collapse from max-width: 1279px down to max-width: 767px so the two-column layout (illustration left, form right) persists across the tablet range instead of collapsing to the mobile stack.
• Removed the unused intermediate tablet illustration sizing (592px / 500px). The mobile sizing (368px / 280px) now lives in the single ≤767px block.
• Mobile: widened the content side gutters from 8px to 12px (var(--space-card)) and increased the illustration heading gap to 56px to match Figma (was 8px).

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

• Shared layout: auth-page.css also backs sign-in and sign-up. The breakpoint change makes those pages two-column on tablet as well (the intended "match desktop" behavior), so please spot-check sign-in / sign-up at tablet widths, not just the password screens.
• Breakpoint boundary: two-column now begins at 768px (Tailwind md). Widths in the 768–1279px range that previously stacked will now show two columns — verify nothing looks cramped in that range, especially the taller sign-up form.
• One hardcoded value: the mobile illustration→heading gap uses a literal 56px. No spacing token matches it (56px exceeds the largest mobile token, --space-xxl = 48px) because the value comes from Figma's vertical centering rather than a token. Sides and bottom remain tokenized (--space-card, --space-xxl).

Screenshots

Mobile

Tablet

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

Summary by CodeRabbit

• Style
  • Refined authentication page responsive styling.
  • Improved layout behavior and content alignment on mobile screens.
  • Removed separate tablet-specific layout adjustments for a more streamlined responsive experience.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 363ecac5-923f-40c5-a0e6-11d485fa4154

📥 Commits

Reviewing files that changed from the base of the PR and between 28c0d13 and 5449bd0.

📒 Files selected for processing (1)

• static/css/v3/auth-page.css

---

📝 Walkthrough

Walkthrough

The auth page’s standalone tablet breakpoint was removed. Its single-column layout and content alignment rules were moved into the mobile breakpoint, which retains mobile illustration heights and uses explicit top, inline, and bottom padding.

Changes

Auth page responsive layout

Layer / File(s)	Summary
Mobile breakpoint layout consolidation static/css/v3/auth-page.css	The mobile breakpoint now applies the single-column wrapper, flex alignment, zero top margin, explicit content padding, and existing mobile illustration and foreground heights. The tablet breakpoint was removed.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

• boostorg/website-v2#2382 — Addresses responsive auth/password-reset layout inconsistencies across tablet and mobile breakpoints.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and clearly describes the main change: fixing the password reset layout.
Description check	✅ Passed	The description matches the template well and includes issue, context, changes, risks, screenshots, and checklist.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch javiercoronarv/2382-password-reset-layout-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}