feat(billing): keep the settings page header pinned while scrolling

[baktun14]

Why

On the settings pages, the main action (Add to Balance on billing) scrolls out of view. The redesign pins the title bar to the top, with a border under it and a full-height border beside the side nav.

Part of CON-1115

What

• SettingsLayout now fills the viewport below the top nav and scrolls its own content column. A plain sticky header doesn't work here: Layout wraps pages in overflow-x-auto divs, which become the sticky container but never scroll. DeploymentDetail and the configure page size themselves the same way.
• The title bar is sticky, 60px tall, with a bottom border and a 20px title. The description sits just below the bar, as in the prototype.
• The side nav is 216px with a right border. On mobile it stays a row at the top, with a bottom border.
• Unselected nav links use the foreground color. The selected one is bold on a muted background, styled through aria-current.
• Billing, Usage and Alerts get the bar. API Keys passes no title yet, so it gets the frame without one.
• Not in this PR: the prototype's 1180px content max width and dotted background.

Tested with unit specs for the title and description cases, and in a local preview in light, dark and at 390px wide. The bar stays pinned, the window itself never scrolls, and nothing overflows sideways. Mutation score on the changed lines is 100%.

Summary by CodeRabbit

• Updates
  • Settings pages now use a full-height layout with a horizontally scrollable tab bar on small screens and a fixed-width, vertically scrollable sidebar on larger screens.
  • The content area scrolls independently, with a sticky header and separate description placement.
  • Active navigation links are visually indicated, and the content area has updated spacing.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: akash-network/console/.coderabbit.yaml
• Review profile: CHILL
• Plan: Essentials
• Run ID: b19545b1-c090-4ee6-a880-af0cf3f48874

📥 Commits

Reviewing files that changed from the base of the PR and between 6926d30 and faa04f5.

📒 Files selected for processing (2)

• apps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.spec.tsx
• apps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.tsx

Included review availability: This review used your included allowance. 1 included review remains after this review. Your included PR review attempts over the past 7 days set your current allowance at 2 reviews per hour.

---

📝 Walkthrough

Walkthrough

SettingsLayout now has responsive navigation, independent content scrolling, and a sticky header. Tests cover header actions and descriptions when no title is supplied, and omission of the description paragraph when no description is provided.

Changes

Settings layout

Layer / File(s)	Summary
Responsive layout and optional header content apps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.tsx, apps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.spec.tsx	The layout uses a viewport-height shell, responsive navigation, independent content scrolling, and a sticky header. Tests cover header actions and descriptions without a title, and confirm that no paragraph renders when the description is absent.

Priority: ⬇️ Low

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

Change: Feature

Suggested reviewers: olebel

Merge Risk: ⚪ Minimal · up to faa04

The settings view provides its own content scrolling below the fixed navigation on desktop and mobile. No actionable merge-blocking issue is identified; proceed with normal checks.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.19%. Comparing base (6926d30) to head (faa04f5).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4181      +/-   ##
==========================================
- Coverage   89.25%   89.19%   -0.07%     
==========================================
  Files        1370     1264     -106     
  Lines       38242    35478    -2764     
  Branches     9248     8711     -537     
==========================================
- Hits        34132    31643    -2489     
+ Misses       3633     3377     -256     
+ Partials      477      458      -19     

Flag	Coverage Δ		*Carryforward flag
api	93.79% <ø> (ø)		Carriedforward from 6926d30
deploy-web	85.01% <100.00%> (-0.01%)	⬇️
log-collector	?
notifications	94.13% <ø> (ø)		Carriedforward from 6926d30
provider-console	81.68% <ø> (ø)		Carriedforward from 6926d30
provider-inventory	?
provider-proxy	91.94% <ø> (ø)		Carriedforward from 6926d30
tx-signer	?

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines	Coverage Δ
...omponents/layout/SettingsLayout/SettingsLayout.tsx	100.00% <100.00%> (ø)

... and 106 files with indirect coverage changes

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[claude]

LGTM, straightforward presentational refactor.

What was reviewed: the SettingsLayout container/header/nav restyle (sticky header, bordered nav, viewport-height layout) and the move from a cn()-based active-link helper to a static class driven by aria-current; checked the new --app-header-height CSS var usage against its existing definition/usage in Layout.tsx and DeploymentDetail.tsx — same pattern, already established. Verified Title accepts a className prop (used for text-xl override). Confirmed the three new spec cases exercise the title/description/header-actions independence correctly and follow the existing setup() helper pattern. No CODEOWNERS restriction applies to this path.

Extended reasoning...

The change is a presentational CSS/markup restyle of SettingsLayout plus three new unit tests; it touches no auth, data, or security-sensitive surface. It reuses an existing app-wide CSS variable pattern (--app-header-height) already present in Layout.tsx and DeploymentDetail.tsx, and the Title component's className prop is correctly typed for the new usage. The diff is small, self-contained, well-tested, and has no CODEOWNERS restriction, so a human need not block on it.