fix: tighten landing page proof layout

[Meru143]

Summary

• trim the hero proof card so it does not stretch below the terminal content
• add an inner terminal shell so the proof block has intentional rounded clipping
• keep the headline-led hero balance while removing the dead space on the right

Verification

• git diff --check
• browser screenshot review of the updated landing page

Summary by CodeRabbit

• Style
  • Improved hero layout alignment for more consistent spacing and placement
  • Refreshed terminal appearance with rounded corners, adjusted sizing/padding, and updated gradient background
  • Better overflow handling: horizontal scrolling preserved while visual clipping and layout behave more predictably
  • Under-the-hood markup reorganized to support these visual improvements without changing content output

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a0d3c731-370b-4748-b240-9188e59d0b23

📥 Commits

Reviewing files that changed from the base of the PR and between 50a79be and fcb91f5.

📒 Files selected for processing (1)

• docs/styles.css

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

• docs/styles.css

---

📝 Walkthrough

Walkthrough

The hero page's terminal markup now nests the top controls and <pre><code> inside a new .terminal-shell wrapper within the existing .terminal-card; corresponding CSS moves the gradient and clipping from the <pre> to .terminal-shell and adjusts .hero and .terminal-card alignment and sizing.

Changes

Cohort / File(s)	Summary
Hero terminal markup & styles docs/index.html, docs/styles.css	Add .terminal-shell wrapper around terminal content; move gradient/background and overflow clipping from pre to .terminal-shell; update .hero alignment (align-items: start) and .terminal-card sizing/spacing (align-self, height, padding).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• docs: add custom landing page #66

Poem

🐰 A cozy shell in card we place,
Commands snug in a rounded space,
Gradients hop from pre to wrap,
Layout settles, takes its nap,
✨ A tiny change, a gentler face.

🚥 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 'fix: tighten landing page proof layout' directly and specifically summarizes the main change: adjusting the hero proof card layout to remove excess space and fix sizing.
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
• Commit unit tests in branch codex/landing-proof-polish

---

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

[Copilot]

Pull request overview

This PR tightens the landing page hero “proof”/terminal layout so the terminal card sizes to its content and clips cleanly with intended rounding.

Changes:

• Prevent the hero grid items from stretching to equal height by aligning items to the start.
• Add a nested .terminal-shell wrapper to provide rounded clipping and move the terminal gradient background to that wrapper.
• Add padding and explicit start alignment to the terminal proof card for cleaner spacing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
docs/styles.css	Updates hero grid alignment and introduces .terminal-card / .terminal-shell styling to control sizing and rounded clipping.
docs/index.html	Wraps the terminal proof block in .terminal-shell to match the new clipping/background structure.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

🧹 Nitpick comments (1)

docs/styles.css (1)

200-209: Consider removing redundant align-self: start.

Since the parent .hero already sets align-items: start (Line 102), the align-self: start on .terminal-card is redundant. The child will already align to start.

That said, keeping it explicit isn't wrong—it provides resilience if .hero alignment changes later.

♻️ Optional: remove redundancy

 .terminal-card {
-  align-self: start;
   padding: 12px;
 }

🤖 Prompt for AI Agents

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

In `@docs/styles.css` around lines 200 - 209, The .terminal-card rule contains a
redundant align-self: start because its parent .hero already sets align-items:
start; remove the align-self: start declaration from the .terminal-card selector
to eliminate the redundancy (keep padding: 12px and other properties unchanged),
or if you intentionally want explicit child-level alignment, add a comment
explaining why align-self is retained on .terminal-card for future maintainers.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@docs/styles.css`:
- Around line 200-209: The .terminal-card rule contains a redundant align-self:
start because its parent .hero already sets align-items: start; remove the
align-self: start declaration from the .terminal-card selector to eliminate the
redundancy (keep padding: 12px and other properties unchanged), or if you
intentionally want explicit child-level alignment, add a comment explaining why
align-self is retained on .terminal-card for future maintainers.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: da506666-a115-4e4c-bb67-9bdec9d50ec9

📥 Commits

Reviewing files that changed from the base of the PR and between 1f101cd and 50a79be.

📒 Files selected for processing (2)

• docs/index.html
• docs/styles.css