Skip to content

fix(settings): make non-transparent CMS header push page content down#20292

Open
MagentaManifold wants to merge 1 commit intomainfrom
FXA-13319
Open

fix(settings): make non-transparent CMS header push page content down#20292
MagentaManifold wants to merge 1 commit intomainfrom
FXA-13319

Conversation

@MagentaManifold
Copy link
Copy Markdown
Contributor

@MagentaManifold MagentaManifold commented Mar 31, 2026

Because

  • Non-transparent CMS header in split layout covers card content

This pull request

  • only set header positioning to absolute when header background is not set
  • adds a small top margin to the card to ensure a gap between the card and the header

Issue that this pull request solves

Closes: FXA-13319

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

How to review (Optional)

  • Key files/areas to focus on: check out storybook
  • Suggested review order:
  • Risky or complex parts:

Screenshots (Optional)

image

Other information (Optional)

Any other information that is important to this pull request.

@MagentaManifold MagentaManifold requested a review from a team as a code owner March 31, 2026 17:09
Copilot AI review requested due to automatic review settings March 31, 2026 17:09
Because:

* Non-transparent CMS header in split layout covers card content

This commit:

* only set header positioning to absolute when header background is set
* adds a small top margin to the card to ensure a gap between the card and the header

Closes FXA-13319
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adjusts the AppLayout in fxa-settings to prevent CMS-provided (non-transparent) headers in split layout from overlapping/pinning on top of the page’s card content.

Changes:

  • Makes the header use desktop:absolute only under certain split-layout/CMS-background conditions.
  • Adds additional vertical spacing to the card container to create separation from the header in mobileLandscape+ breakpoints.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants