docs(layout): ensure content sits in main (#31610)

Co-authored-by: XhmikosR <[email protected]>

2 files changed, 51 insertions, 35 deletions

diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
index 4d43276a0..707c4949d 100644
--- a/site/assets/scss/_layout.scss
+++ b/site/assets/scss/_layout.scss
@@ -2,20 +2,12 @@
   @include media-breakpoint-up(md) {
     display: grid;
     gap: $grid-gutter-width;
-    grid-template-areas:
-      "sidebar intro"
-      "sidebar toc"
-      "sidebar content";
+    grid-template-areas: "sidebar main";
     grid-template-columns: 1fr 3fr;
-    grid-template-rows: auto auto 1fr;
   }
 
   @include media-breakpoint-up(lg) {
-    grid-template-areas:
-      "sidebar intro toc"
-      "sidebar content toc";
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr 5fr;
   }
 }
 
@@ -23,6 +15,28 @@
   grid-area: sidebar;
 }
 
+.bd-main {
+  grid-area: main;
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: inherit;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-columns: 4fr 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}
+
 .bd-intro {
   grid-area: intro;
 }
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index e75a6a3f4..5d390a5f8 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -10,41 +10,43 @@
     {{ partial "docs-subnav" . }}
 
     <div class="container-xxl my-4 bd-layout">
-      <div class="bd-sidebar">
+      <aside class="bd-sidebar">
         {{ partial "docs-sidebar" . }}
-      </div>
+      </aside>
 
-      <div class="bd-intro pt-md-3 pl-lg-4">
-        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/tree/main/site/content/{{ .Page.File.Path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
-          <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+      <main class="bd-main order-1">
+        <div class="bd-intro pt-md-3 pl-lg-4">
+          <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
+            <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/tree/main/site/content/{{ .Page.File.Path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
+            <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+          </div>
+          <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+          {{ partial "ads" . }}
         </div>
-        <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-        {{ partial "ads" . }}
-      </div>
 
-      {{ if (eq .Page.Params.toc true) }}
+        {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc pl-xl-3 text-muted mb-lg-5">
           <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
           {{ .TableOfContents }}
         </div>
-      {{ end }}
-
-      <main class="bd-content order-1 pl-lg-4">
-        {{ if .Page.Params.sections }}
-          <div class="row g-3">
-            {{ range .Page.Params.sections }}
-            <div class="col-md-6">
-              <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
-                <strong class="d-block h5 mb-0">{{ .title }}</strong>
-                <span class="text-secondary">{{ .description }}</span>
-              </a>
-            </div>
-            {{ end }}
-          </div>
         {{ end }}
 
-        {{ .Content }}
+        <div class="bd-content pl-lg-4">
+          {{ if .Page.Params.sections }}
+            <div class="row g-3">
+              {{ range .Page.Params.sections }}
+              <div class="col-md-6">
+                <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
+                  <strong class="d-block h5 mb-0">{{ .title }}</strong>
+                  <span class="text-secondary">{{ .description }}</span>
+                </a>
+              </div>
+              {{ end }}
+            </div>
+          {{ end }}
+
+          {{ .Content }}
+        </div>
       </main>
     </div>