fix: swap to hamburger header at tablet sizes (≤1233px)

[kemuru]

PR-Codex overview

This PR focuses on enhancing the responsiveness of the Header component and its subcomponents for mobile navigation. It introduces new props and styles to ensure better layout and functionality on mobile devices.

Detailed summary

• Added isMobileNavbar prop to ConnectWallet, affecting rendering of AccountDisplay.
• Updated styles in LightButton, Menu, Explore, and AccountDisplay to conditionally apply styles based on isMobileNavbar.
• Modified media queries to use BREAKPOINT_HEADER_DESKTOP for layout adjustments.
• Adjusted Container components to accept mobile-specific styles.
• Enhanced StyledLink and button styles to improve responsiveness.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• Refactor
  • Improved responsive behavior and breakpoints for desktop vs mobile headers.
  • Updated mobile navbar layout and appearance for compact screens.
  • Adjusted header visibility and positioning across viewports.
  • Refined wallet/account display styling to better fit mobile navigation.
  • Optimized navigation menu and link styling for mobile vs desktop contexts.

[netlify]

❌ Deploy Preview for kleros-v2-testnet-devtools failed. Why did it fail? →

Name	Link
🔨 Latest commit	b4ae215
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-testnet-devtools/deploys/6a16d51637a38f0009b72af0

[netlify]

✅ Deploy Preview for kleros-v2-testnet ready!

Name	Link
🔨 Latest commit	b4ae215
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-testnet/deploys/6a16d516e768ef0009506ba5
😎 Deploy Preview	https://deploy-preview-2298--kleros-v2-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

❌ Deploy Preview for kleros-v2-neo failed. Why did it fail? →

Name	Link
🔨 Latest commit	b4ae215
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-neo/deploys/6a16d516d037f20008acb2b8

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1c7f5048-2f1b-4e16-abed-ddf33910ded7

📥 Commits

Reviewing files that changed from the base of the PR and between c6bfb44 and b4ae215.

📒 Files selected for processing (8)

• web/src/components/ConnectWallet/AccountDisplay.tsx
• web/src/components/ConnectWallet/index.tsx
• web/src/components/LightButton.tsx
• web/src/layout/Header/DesktopHeader.tsx
• web/src/layout/Header/MobileHeader.tsx
• web/src/layout/Header/navbar/Explore.tsx
• web/src/layout/Header/navbar/Menu/index.tsx
• web/src/layout/Header/navbar/index.tsx

🚧 Files skipped from review as they are similar to previous changes (6)

• web/src/components/ConnectWallet/index.tsx
• web/src/layout/Header/DesktopHeader.tsx
• web/src/layout/Header/navbar/Explore.tsx
• web/src/components/LightButton.tsx
• web/src/layout/Header/navbar/index.tsx
• web/src/components/ConnectWallet/AccountDisplay.tsx

---

Walkthrough

This PR refactors responsive navbar styling by introducing a desktop breakpoint constant and threading an isMobileNavbar prop through the wallet and navbar component hierarchy. Components conditionally apply landscape styles—either via the new prop or explicit media queries—replacing reliance on global landscapeStyle helpers.

Changes

Responsive Mobile Navbar Styling

Layer / File(s)	Summary
Responsive Breakpoint Constant web/src/styles/landscapeStyle.ts	Introduces BREAKPOINT_HEADER_DESKTOP = 1234 constant to define when desktop header renders versus hamburger navigation.
ConnectWallet and AccountDisplay Responsive Styling web/src/components/ConnectWallet/index.tsx, web/src/components/ConnectWallet/AccountDisplay.tsx	Threads optional isMobileNavbar prop through ConnectWallet to AccountDisplay; Container, AccountContainer, and ChainConnectionContainer conditionally apply landscape styling (background, layout direction, rounding, padding, label styling) when not in mobile navbar mode.
LightButton Conditional Landscape Styling web/src/components/LightButton.tsx	StyledButton wraps landscape padding and button-svg margin overrides in a conditional that only applies when isMobileNavbar is not set.
Header Layout Media Query Refactoring web/src/layout/Header/DesktopHeader.tsx, web/src/layout/Header/MobileHeader.tsx	DesktopHeader and MobileHeader replace landscapeStyle/css helpers with explicit @media (min-width: ${BREAKPOINT_HEADER_DESKTOP}px) queries; DesktopHeader shows flex layout at desktop widths, MobileHeader hides at desktop widths.
NavBar Menu and Explore Components with Mobile Props web/src/layout/Header/navbar/index.tsx, web/src/layout/Header/navbar/Menu/index.tsx, web/src/layout/Header/navbar/Explore.tsx	NavBar passes isMobileNavbar={true} to ConnectWallet; Menu Container and ButtonContainer, along with Explore's Container and Title, accept $isMobileNavbar and conditionally apply landscape flex-row layout and color/hover styling only when not in mobile navbar mode.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A breakpoint hops through the navbar design,
Props threaded like carrots down each line,
Landscape styles now chosen when they fit,
Mobile keeps nimble, desktop wears the kit,
I nibble CSS and cheer this tidy commit.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: introducing a tablet-size breakpoint (≤1233px) to swap to a hamburger header layout.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/header-tablet-breakpoint

---

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

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[jaybuidl]

Alternatively:
remove Home
make Connected Wallet go to Profile (not settings, we already have the gear icon for this)

[kemuru]

superseded by #2419