From a65dfbda167de2fd1866a0e9ac4ff6fe242e9f91 Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Thu, 12 Mar 2026 19:31:37 +0000
Subject: [PATCH 1/2] Fix layout issues in component-home-v2 from PR #369

Fixes two layout issues introduced in PR #369:

1. Main element width constraint: Exclude .home-content from the nav-width
   calculation to prevent content from being squished on home pages
   - Updated main.css selector from `main:not(.labs)` to
     `main:not(.labs):not(.home-content)`

2. Overview heading layout: Move heading outside the .home-intro flex
   container and make it visually hidden to prevent inline display
   - Moved h2#home-overview before the .home-intro div
   - Added .visually-hidden class to hide heading while keeping it accessible

Tested with Playwright to verify:
- Main element has full width (1160px, not constrained)
- Overview heading is visually hidden (height: 1px, not visible)
- Intro paragraph displays on its own line

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/css/main.css                   |  2 +-
 src/partials/component-home-v2.hbs | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 9c04ff65..3fee1d9f 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -33,7 +33,7 @@ body.status-404 main > .content {
     min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
   }
 
-  main:not(.labs) {
+  main:not(.labs):not(.home-content) {
     width: calc(100% - var(--nav-width));
   }
 
diff --git a/src/partials/component-home-v2.hbs b/src/partials/component-home-v2.hbs
index 379750fc..43141612 100644
--- a/src/partials/component-home-v2.hbs
+++ b/src/partials/component-home-v2.hbs
@@ -1,12 +1,12 @@
 <main class="home-content">
 <section id="preamble" aria-labelledby="home-overview">
+  {{#with page.attributes.home-overview-title}}
+    <h2 id="home-overview" class="visually-hidden">{{{this}}}</h2>
+  {{else}}
+    <h2 id="home-overview" class="visually-hidden">Overview</h2>
+  {{/with}}
   <div class="sectionbody">
     <div class="paragraph home-intro">
-      {{#with page.attributes.home-overview-title}}
-        <h2 id="home-overview">{{{this}}}</h2>
-      {{else}}
-        <h2 id="home-overview">Overview</h2>
-      {{/with}}
       <p>{{{page.attributes.home-intro}}} {{#with page.attributes.home-intro-learn-more}}<a href="{{{relativize (resolve-resource this)}}}">Learn more</a>{{/with}}
       </p>
       {{#if page.attributes.home-ai-summary}}

From bc03b9b7faeb35286c9524203187f615e6c10bca Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Thu, 12 Mar 2026 20:28:42 +0000
Subject: [PATCH 2/2] Exclude metadata div for component-home-v2 pages

The metadata--main div was being rendered even when empty for
component-home-v2 pages, causing unwanted spacing below the h1.

Wrapped the metadata div in an unless condition to exclude it
completely for component-home-v2 role pages.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/partials/article.hbs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index c7e4f6d2..313df32b 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -16,6 +16,7 @@
     <h1 class="page">{{{this}}}</h1>
   {{/with}}
 {{/if}}
+{{#unless (eq page.attributes.role 'component-home-v2')}}
 <div class="metadata metadata--main">
   {{#if page.attributes.beta}}
     <div class="beta-label">
@@ -32,6 +33,7 @@
   {{/if}}
   {{> markdown-dropdown}}
 </div>
+{{/unless}}
 {{#if (or page.attributes.beta page.attributes.limited-availability page.attributes.context-switcher)}}
   <script>
   document.addEventListener("DOMContentLoaded", () => {