Fix layout issues in component-home-v2 from PR #369

[JakeSCahill]

Summary

Fixes two layout issues introduced in PR #369 that were affecting home pages using the component-home-v2 layout (like https://docs.redpanda.com/redpanda-cloud/home/):

1. Width constraint issue: The new <main class="home-content"> wrapper was being constrained by the width: calc(100% - var(--nav-width)) rule, causing content to be squished
2. Overview heading layout: The Overview h2 heading was displaying inline with the intro paragraph text

Changes

src/css/main.css

• Updated selector from main:not(.labs) to main:not(.labs):not(.home-content) on line 36
• This excludes the .home-content class from the nav-width constraint

src/partials/component-home-v2.hbs

• Moved the <h2 id="home-overview"> element outside the .home-intro flex container (lines 3-7)
• Added .visually-hidden class to the heading to hide it visually while keeping it accessible for screen readers and ARIA

Testing

Verified fixes using Playwright:

• ✅ Main element has full width (1160px, not constrained by nav-width)
• ✅ Overview heading is visually hidden (height: 1px, position: absolute)
• ✅ Intro paragraph displays on its own line, not inline with heading
• ✅ All linting tests pass

Screenshot evidence included in testing.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	bc03b9b
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/69b322077d9ac900086b91f2
😎 Deploy Preview	https://deploy-preview-370--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 34 (🔴 down 1 from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d7644e19-1f1e-4165-a3ca-9d6a7a28b127

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR makes two targeted modifications to the homepage component styling and structure. First, a CSS selector is narrowed by adding an additional exclusion (:not(.home-content)) to prevent the width calculation from applying to elements with the home-content class. Second, the home-overview title rendering is relocated from within the home-intro block to a new preamble block positioned above the section body, with the heading rendered as visually hidden and a fallback value of "Overview" when no title is provided.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Improve homepage semantic HTML and accessibility for AI crawlers #369: Overlaps with the component-home-v2.hbs changes related to homepage template and accessibility modifications.

Suggested reviewers

• Feediver1
• paulohtb6

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main purpose of the PR - fixing layout issues in component-home-v2 introduced by PR #369.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the layout issues being fixed and detailing the specific changes made.
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 fix/component-home-v2-layout-issues

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

CodeRabbit can generate a title for your PR based on the changes.

Add @coderabbitai placeholder anywhere in the title of your PR and CodeRabbit will replace it with a title based on the changes in the PR. You can change the placeholder by changing the reviews.auto_title_placeholder setting.

[Feediver1]

All background tasks have already completed and their results were used in the previous response. The testing is done — no further action needed from those notifications.

To summarize what was accomplished:

1. npm install in docs-ui — completed, 1113 packages installed
2. gulp bundle in docs-ui (PR branch) — completed, bundle built at /Users/joycefee/docs-ui/build/ui-bundle.zip
3. npm install in docs-site — completed
4. Antora build with the test playbook — completed (exit code 0), output in docs-site/docs-home-test/

All results were already analyzed and verified. PR #370 is confirmed to fix both issues correctly for the Redpanda Connect and Redpanda Cloud home pages.