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

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));
   }
 

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", () => {

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