fix(web): align MFA enrollment banner with Pencil design

[FSM1]

Summary

• Fixed grid layout bug: MFA banner had no grid-area assignment, causing it to be auto-placed into the 180px sidebar column — resulting in word-by-word text wrapping and footer overlap
• Added banner grid row between header and sidebar/main in the CSS Grid template (desktop + mobile)
• Aligned all styling to Pencil design spec: added shield-alert icon, corrected text prefix ([!] vs //), fixed font size (11px), button padding (6px 16px), font weight (500), and text layout (flex with 4px gap)

Test plan

• Verify MFA banner renders as a full-width bar between header and file browser
• Verify text flows horizontally on a single line with shield icon, [!] secure your account, and description
• Verify --setup-mfa button has correct padding and navigates to Settings > Security
• Verify [x] dismiss works and banner does not reappear in the same session
• Verify banner row collapses when MFA is enabled or banner is dismissed (no empty space)
• Verify mobile responsive layout includes banner row

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Resolved MFA banner footer overlap issue with improved layout and responsive design adjustments.

• Style

  • Enhanced MFA prompt visual presentation with updated styling, icon, and improved text hierarchy.
  • Refined spacing and typography for better readability and visual consistency.

[coderabbitai]

Warning

Rate limit exceeded

@FSM1 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 20 minutes and 23 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Walkthrough

Adds a dedicated banner row to the app shell grid layout and restyled the MFA enrollment prompt component to display as a banner with icon, updated text formatting, and adjusted z-index positioning. Includes planning documentation for the MFA banner-footer overlap fix.

Changes

Cohort / File(s)	Summary
Layout Infrastructure apps/web/src/styles/layout.css	Added a banner row to the app shell CSS grid by updating grid-template-rows and grid-template-areas, with responsive layout adjustments for mobile.
MFA Prompt Styling apps/web/src/App.css	Updated .mfa-prompt with grid-area assignment, z-index, and padding. Added .mfa-prompt-icon, .mfa-prompt-text (flex layout, font-size adjustment), and .mfa-prompt-desc (secondary text styling). Adjusted button spacing and font-weight values.
MFA Prompt Component apps/web/src/components/mfa/MfaEnrollmentPrompt.tsx	Added inline SVG icon, updated prompt text formatting, and wrapped descriptive content in a new span with mfa-prompt-desc class.
Planning Documentation .planning/debug/mfa-banner-footer-overlap.md	Planning/debug documentation detailing the MFA banner-footer overlap issue, root cause analysis, and resolution strategy.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: add staging environment warning banner #73: Both PRs modify the app shell grid layout to add a dedicated banner row/area to accommodate a top banner.

Suggested labels

render-preview

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and concisely describes the main change: fixing CSS Grid layout for the MFA enrollment banner to align with the Pencil design specification.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mfa-banner-layout

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

apps/web/src/components/mfa/MfaEnrollmentPrompt.tsx (1)

100-100: Hardcoded stroke color — prefer currentColor + CSS variable.

stroke="#F59E0B" duplicates the amber warning color that the rest of the MFA prompt already references via var(--color-warning) (e.g., .mfa-prompt-text strong). If the design token changes, the icon colour won't update.

🎨 Proposed refactor

In MfaEnrollmentPrompt.tsx:

-        stroke="#F59E0B"
+        stroke="currentColor"

In App.css .mfa-prompt-icon:

 .mfa-prompt-icon {
   flex-shrink: 0;
+  color: var(--color-warning);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/mfa/MfaEnrollmentPrompt.tsx` at line 100, The SVG in
MfaEnrollmentPrompt.tsx currently hardcodes stroke="#F59E0B"; change the SVG to
use stroke="currentColor" (or remove the explicit stroke so it inherits) and
update the component's styling by applying the .mfa-prompt-icon class that sets
color: var(--color-warning) so the icon color follows the design token; locate
the SVG in MfaEnrollmentPrompt.tsx and the CSS rule to add or update
.mfa-prompt-icon { color: var(--color-warning); } so the icon inherits the
warning color.

apps/web/src/App.css (1)

2118-2123: font-weight: 500 bypasses the design token system.

All other font-weight values in this file use var(--font-weight-*) variables. If --font-weight-medium doesn't exist yet, this is a good opportunity to introduce the token so future theme changes propagate automatically.

🎨 Proposed refactor

Add the token to your CSS variables/design tokens file:

--font-weight-medium: 500;

Then in App.css:

-.mfa-prompt-btn-setup {
-  font-weight: 500;
+.mfa-prompt-btn-setup {
+  font-weight: var(--font-weight-medium);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/App.css` around lines 2118 - 2123, Replace the hardcoded
font-weight in the .mfa-prompt-btn-setup rule with a design token: add a new CSS
variable --font-weight-medium (value 500) to your design tokens/variables file,
then change font-weight: 500 to font-weight: var(--font-weight-medium) inside
the .mfa-prompt-btn-setup rule so it follows the existing token system.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/components/mfa/MfaEnrollmentPrompt.tsx`:
- Line 92: The MFA prompt currently uses role="banner" on the div with className
"mfa-prompt" inside the MfaEnrollmentPrompt component which creates a duplicate
landmark; change that role to role="status" and add aria-live="polite" (and keep
any existing accessible labeling like aria-label or visually-hidden text) so the
prompt becomes a non-critical, politely announced status region instead of a
second banner.

---

Nitpick comments:
In `@apps/web/src/App.css`:
- Around line 2118-2123: Replace the hardcoded font-weight in the
.mfa-prompt-btn-setup rule with a design token: add a new CSS variable
--font-weight-medium (value 500) to your design tokens/variables file, then
change font-weight: 500 to font-weight: var(--font-weight-medium) inside the
.mfa-prompt-btn-setup rule so it follows the existing token system.

In `@apps/web/src/components/mfa/MfaEnrollmentPrompt.tsx`:
- Line 100: The SVG in MfaEnrollmentPrompt.tsx currently hardcodes
stroke="#F59E0B"; change the SVG to use stroke="currentColor" (or remove the
explicit stroke so it inherits) and update the component's styling by applying
the .mfa-prompt-icon class that sets color: var(--color-warning) so the icon
color follows the design token; locate the SVG in MfaEnrollmentPrompt.tsx and
the CSS rule to add or update .mfa-prompt-icon { color: var(--color-warning); }
so the icon inherits the warning color.