fix: header footer content alignment

[kemuru]

PR-Codex overview

This PR focuses on improving the layout and styling of the Header and Footer components in a React application. It introduces responsive design adjustments and modifies padding and margins to enhance the overall visual structure.

Detailed summary

• Added margin-left: -8px; to DesktopHeader.
• Added margin-right: -8px; to RightSide.
• Updated HeaderContainer with max-width, margin, and adjusted padding.
• Introduced Inner div in Footer for layout consistency.
• Adjusted padding and added justify-content: center; in Footer.
• Enhanced responsive styles with responsiveSize in both Header and Footer.

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

Summary by CodeRabbit

• Style
  • Updated header and footer layout spacing and positioning for improved visual consistency across all device sizes and screen orientations.
  • Optimized responsive padding and margins to enhance overall layout presentation on larger displays and desktop environments.
  • Refined desktop header element spacing for better page layout balance and improved content alignment throughout.

[netlify]

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

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

[netlify]

✅ Deploy Preview for kleros-v2-testnet ready!

Name	Link
🔨 Latest commit	58b7341
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-testnet/deploys/6a118d463a0beb71d5600d18
😎 Deploy Preview	https://deploy-preview-2291--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	58b7341
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-neo/deploys/6a0cb4de538eea00082c73f0

[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: 188584b7-a93e-4259-a95a-8f298a399b80

📥 Commits

Reviewing files that changed from the base of the PR and between 185686b and 58b7341.

📒 Files selected for processing (3)

• web/src/layout/Footer/index.tsx
• web/src/layout/Header/DesktopHeader.tsx
• web/src/layout/Header/index.tsx

---

Walkthrough

The Header and Footer layout components were refactored to implement a consistent max-width constrained, centered responsive layout pattern. Footer introduces an Inner wrapper with responsive spacing and landscape-specific layout rules, while Header applies similar max-width and responsive padding constraints. Desktop header spacing is fine-tuned with negative side margins.

Changes

Responsive Layout Refactoring for Header and Footer

Layer / File(s)	Summary
Footer layout refactoring with Inner wrapper web/src/layout/Footer/index.tsx	Footer imports updated to include MAX_WIDTH_LANDSCAPE, landscapeStyle, and responsiveSize. New Inner wrapper component added with max-width constraint, responsive padding, and landscape row layout. Container now centers content. StyledSocialMedia gains negative margin-right in landscape mode. JSX restructured to wrap content inside Inner.
Header layout refactoring with responsive padding web/src/layout/Header/index.tsx	Imports reworked to include styled utilities and new responsive style helpers. HeaderContainer updated with max-width constraint, auto-centered margin, base 16px horizontal padding, and landscape-specific responsive padding adjustment via landscapeStyle and responsiveSize(0, 132).
Desktop header side spacing adjustments web/src/layout/Header/DesktopHeader.tsx	LeftSide and RightSide styled components gain negative horizontal margins (-8px) to adjust header content spacing on landscape displays.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A footer finds its bounds, max-width at last,
The header centers strong, responsive and fast,
With margins adjusted and padding precise,
The layout now scales—oh, what a device!

🚥 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 'fix: header footer content alignment' directly and clearly describes the main changes in the PR, which focus on adjusting header and footer layout styling and spacing for proper content alignment across responsive breakpoints.
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-footer-content-alignment

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{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