fix: banner offset

[amelia-c0n]

Description

Push the fixed page header (and fixed page layout) down by the banner height when the base-URL missing banner is shown, using shared desktop/mobile offset constants so the header no longer covers the banner and admin pages don’t sit underneath it.

Fixes #42072

Automation

/ok-to-test tags="@tag.All"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/30789245853
Commit: e18fd1c
Cypress dashboard.
Tags: @tag.All
Spec:

---

Mon, 03 Aug 2026 07:13:05 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

• Bug Fixes
  • Improved page sizing and positioning when notification banners are visible.
  • Fixed responsive layouts across desktop and mobile views.
  • Updated settings pages to use available container height, preventing viewport-based layout issues.
  • Improved alignment of page headers and content around banners and save bars.
  • Prevented content from being obscured or unnecessarily cropped when banners or save controls are displayed.

[coderabbitai]

Walkthrough

The change centralizes banner offsets, applies responsive offsets to fixed pages, and updates admin settings containers to use parent-relative height calculations.

Changes

Banner-aware layout

Layer / File(s)	Summary
Shared banner offset definitions app/client/src/pages/common/bannerOffsets.ts, app/client/src/pages/common/PageHeader.tsx	Desktop and mobile banner offsets are centralized and used by PageHeader instead of hardcoded values.
Responsive PageWrapper offsets app/client/src/pages/common/PageWrapper.tsx	PageWrapper computes banner offsets from banner visibility and device type, then applies them to fixed positioning and body height.
Admin settings parent-relative sizing app/client/src/pages/AdminSettings/Authentication/AuthPage.tsx, app/client/src/pages/AdminSettings/components.tsx	Admin settings containers use parent-relative heights instead of viewport and header calculations.

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

Suggested reviewers: sondermanish

Sequence Diagram(s)

sequenceDiagram
  participant PageWrapper
  participant BannerState
  participant DeviceState
  participant Wrapper
  participant PageBody
  BannerState->>PageWrapper: report banner visibility
  DeviceState->>PageWrapper: report mobile status
  PageWrapper->>PageWrapper: calculate bannerOffset
  PageWrapper->>Wrapper: apply bannerOffset to positioning
  PageWrapper->>PageBody: apply bannerOffset to height

Loading

Poem

Banners mark the viewport line,
Shared offsets keep pages fine.
Fixed wrappers shift with care,
Admin panels fill parent space,
Heights no longer fight the header.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue #42072 by offsetting fixed headers and admin layouts when the base-URL banner is visible.
Out of Scope Changes check	✅ Passed	All listed changes support banner offset handling and the linked admin-page overlap fix.
Title check	✅ Passed	The title clearly identifies the main change: correcting banner offset handling.
Description check	✅ Passed	The description explains the fix, links the issue, includes automation and test results, and completes the communication section.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/admin_banner_offset

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/client/src/pages/common/PageWrapper.tsx`:
- Around line 90-95: Update the bannerOffset calculation in PageWrapper so
visible showBaseUrlBanner applies the appropriate mobile or desktop offset for
non-fixed wrappers as well as fixed ones. Preserve zero offset when the banner
is hidden, and ensure the resulting margin behavior aligns with PageHeader
without requiring external consumers to compensate.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 7e3684aa-2b16-4ab8-a8c3-aa3b0a7f3206

📥 Commits

Reviewing files that changed from the base of the PR and between bd51e38 and 3a918e4.

📒 Files selected for processing (5)

• app/client/src/pages/AdminSettings/Authentication/AuthPage.tsx
• app/client/src/pages/AdminSettings/components.tsx
• app/client/src/pages/common/PageHeader.tsx
• app/client/src/pages/common/PageWrapper.tsx
• app/client/src/pages/common/bannerOffsets.ts

[amelia-c0n]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/30666365547.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 42073.
recreate: .
base-image-tag: .

[github-actions]

Deploy-Preview-URL: https://ce-42073.dp.appsmith.com