Improve website homepage layout

[timcogan]

Summary by CodeRabbit

• Style
  • Refined page padding for more consistent spacing across layouts.
  • Adjusted hero sizing to be more flexible on varied screen sizes, with heading wrapping restored on wider screens.
  • Improved footer spacing and responsive layout for narrow viewports, including tighter padding and compact row layout.
  • Tweaked text-wrapping behavior to improve readability across breakpoints.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adjusts CSS: reduces page padding and footer top padding, changes .hero from fixed-to-flex sizing, alters narrow-viewport (.max-width:860px) hero/footer padding and footer layout to a single-row nowrap with gap and font-size tweaks, and moves white-space handling between hero and footer across breakpoints.

Changes

Cohort / File(s)

Summary

CSS Styling Updates website/static/css/styles.css

Page padding changed to 20px; .hero flex changed from 0 0 auto with min-height: clamp(...) to 1 1 auto and min-height: 0; footer padding-top reduced 46px → 28px; responsive rules for max-width:860px adjust .hero padding and set .footer to a single-row layout with flex-wrap: nowrap, justify-content: space-between, gap: 8px, font-size: 12px, and move white-space handling from .hero h1 to .footer > *; at min-width:861px .hero h1 white-space is restored to normal.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 I nibble the CSS with a curious cheer,

padding trimmed, hero stretches near,
footer tucks tidy when screens grow small,
flexbox and gaps — I hopped through it all! 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve website homepage layout' accurately reflects the main changes which involve adjusting CSS for page layout, hero section sizing, and footer styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/website-layout

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

website/static/css/styles.css (1)

40-40: Redundant shorthand: padding: 20px 20px 20px simplifies to padding: 20px.

All three values are identical, so the shorthand can be collapsed.

♻️ Suggested simplification

-  padding: 20px 20px 20px;
+  padding: 20px;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@website/static/css/styles.css` at line 40, The padding declaration uses three
identical values ("padding: 20px 20px 20px"); simplify it to the single-value
shorthand by replacing that declaration with "padding: 20px" in the same CSS
rule (locate the rule containing the existing padding line to update it).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@website/static/css/styles.css`:
- Around line 364-374: The media-query override forcing .footer { flex-wrap:
nowrap } and .footer > * { white-space: nowrap } creates horizontal overflow on
narrow viewports; update the media-query rules affecting .footer to restore
responsive wrapping (use flex-wrap: wrap) or, if you must prevent wrapping, add
a safety net by enabling horizontal scrolling (overflow-x: auto) on .footer
and/or allow individual flex items to truncate (e.g., remove white-space:
nowrap) so the three footer items (copyright, privacy link, cookie management
link) don’t cause layout overflow.

---

Nitpick comments:
In `@website/static/css/styles.css`:
- Line 40: The padding declaration uses three identical values ("padding: 20px
20px 20px"); simplify it to the single-value shorthand by replacing that
declaration with "padding: 20px" in the same CSS rule (locate the rule
containing the existing padding line to update it).

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 895be2e and 36d9044.

📒 Files selected for processing (1)

• website/static/css/styles.css

[coderabbitai]

♻️ Duplicate comments (1)

website/static/css/styles.css (1)

364-376: overflow-x: auto safety net added — resolves previous overflow concern.

The earlier review flagged that flex-wrap: nowrap + white-space: nowrap would cause horizontal overflow on narrow viewports. The current code addresses this with overflow-x: auto and overflow-y: hidden. The footer remains single-row on mobile as intended, with a scroll escape hatch for overflow content.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@website/static/css/styles.css` around lines 364 - 376, The footer overflow
issue is resolved by keeping the .footer rules (flex-wrap: nowrap, white-space:
nowrap on .footer > *) and the added overflow-x: auto; overflow-y: hidden; —
apply these unchanged, add -webkit-overflow-scrolling: touch to .footer to
improve smooth scrolling on mobile, and remove the stray [duplicate_comment]
marker from the review/commit metadata; target the .footer and .footer > *
selectors and the duplicate_comment token when making the edits.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@website/static/css/styles.css`:
- Around line 364-376: The footer overflow issue is resolved by keeping the
.footer rules (flex-wrap: nowrap, white-space: nowrap on .footer > *) and the
added overflow-x: auto; overflow-y: hidden; — apply these unchanged, add
-webkit-overflow-scrolling: touch to .footer to improve smooth scrolling on
mobile, and remove the stray [duplicate_comment] marker from the review/commit
metadata; target the .footer and .footer > * selectors and the duplicate_comment
token when making the edits.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 36d9044 and aac96a5.

📒 Files selected for processing (1)

• website/static/css/styles.css