[diegosouzapw]

What & why

Continuation of the shared visual-identity work (design.md). Two owner-requested adjustments:

1. The grid was missing on the login screen — and on every other standalone screen

The graph-paper grid is a global body::before layer. It shows on the dashboard because DashboardLayout's shell is transparent. But the standalone pages (login, etc.) wrap themselves in min-h-screen … bg-bg, and bg-bg is the same opaque fill as <body> (#f9f9fb / #0b0e14) — so it painted right over the grid. The audit found this affected 10 screens, not just login.

Fix = make those full-screen wrappers transparent (remove only the bg-bg token; the body already paints the identical base color, so nothing changes visually except the grid now shows through):

login, forgot-password, callback, maintenance, offline, status, terms, privacy, onboarding, and ErrorPageScaffold (covers 400/401).

Closes design.md D4 (extended from login-only to every standalone screen).

2. Layout follows the resolution up to ~4K before centering

The dashboard content shell was capped at max-w-7xl (1280px) + mx-auto, so on large monitors it centered with wide empty side gutters. Raised to a fluid max-w-[3840px] (true 4K): content now follows the viewport up to ~4K and only centers beyond it (DashboardLayout.tsx). This is the single global lever — it covers all 44 dashboard screens.

Deliberately-narrow pages keep their own caps by design (ProviderOnboardingWizard max-w-5xl, Rtk/CavemanContextPageClient max-w-6xl) — stretching a wizard/prose to 4K reads badly.

This is design.md D8.

Tests

Extended tests/unit/design-grid-background.test.ts (Phase 5, +2 tests):

• standalone full-screen pages must not paint bg-bg over the grid (static guard across all 10 screens; (?![\w-]) keeps bg-bg-alt/bg-bg-main from matching);
• the content shell is fluid up to 4K (max-w-[3840px], no max-w-7xl).

15/15 green. Also verified: ESLint (changed files) clean, typecheck:core clean, rtl-logical-classes (scans DashboardLayout) 15/15.

Risk

Class-string only — no logic, no imports, no new deps. Removing bg-bg from a wrapper whose body already has the same fill is visually a no-op except the grid becomes visible; theme switching still flows from <body>'s --color-bg.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request implements Phase 5 of the design system standardization, making all standalone full-screen pages (such as login, onboarding, error, and legal pages) transparent so that the global grid background shows through. It also expands the dashboard content shell to be fluid up to a 4K resolution cap (max-w-[3840px]) and adds corresponding unit tests. The reviewer provided valuable feedback pointing out that the regular expression in the new unit tests is fragile because it only matches double-quoted strings, suggesting a more robust pattern to cover single quotes and template literals.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The current regular expression is a bit fragile as it only checks for bg-bg within double-quoted strings (due to [^"]*). This means it would not detect a regression if the bg-bgclass were added back inside aclassName using single quotes ('...') or template literals (`` ...``), which are present in the codebase (e.g.,login/page.tsx`). This could lead to the test passing incorrectly.

A more robust approach would be to check for co-occurrence on the same line, which is less dependent on the quote style. While this has a small risk of false positives if the classes appear in different attributes on the same line, it provides better coverage for different string types used for className.

      !/((min-h-screen[^
]*\bbg-bg(?![
-]))|(\bbg-bg(?![
-])[^
]*min-h-screen))/.test(src),