Layout: move main content before nav in DOM source order (#3344)

Scrapers and AI crawlers reading /reference pages hit a wall of
navigation HTML before reaching the article. Put <main> first in
DOM order across all three layouts while preserving the visual
layout via CSS Grid order utilities.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

src/Elastic.ApiExplorer/_Layout.cshtml

@@ -16,8 +16,7 @@ else
 			grid-cols-1
 			md:grid-cols-[var(--max-sidebar-width)_1fr]
 		">
-		@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
-		<div class="lg:grid lg:grid-cols-[1fr_var(--max-sidebar-width)]">
+		<div class="lg:grid lg:grid-cols-[1fr_var(--max-sidebar-width)] md:order-2">
 			<div class="justify-center px-6 lg:px-0">
 				<main id="content-container" class="w-full flex flex-col relative pb-12 overflow-x-hidden">
 					<article id="markdown-content" class="content-container markdown-content md:px-4">
@@ -28,6 +27,7 @@ else
 			</div>
 			@await RenderPartialAsync(_ApiToc.Create(Model.TocItems.ToArray()))
 		</div>
+		@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
 	</div>
 </div>
 @if (Model.BuildType == BuildType.Assembler)

src/Elastic.Codex/_MarkdownLayout.cshtml

@@ -25,18 +25,18 @@
 				md:px-4
 	">
 		<div class="min-h-screen grid grid-cols-1 md:grid-cols-[var(--max-sidebar-width)_1fr] gap-4">
-			@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
-			<main id="content-container" class="min-w-0 lg:grid lg:grid-cols-[minmax(0,var(--max-text-width))_minmax(0,var(--max-sidebar-width))] justify-center mx-4 gap-4">
-				@await RenderPartialAsync(_TableOfContents.Create(Model))
-				<div class="mb-9 mt-0 min-w-0">
+			<main id="content-container" class="min-w-0 flex flex-col lg:grid lg:grid-cols-[minmax(0,var(--max-text-width))_minmax(0,var(--max-sidebar-width))] justify-center mx-4 gap-4 md:order-2">
+				<div class="mb-9 mt-0 min-w-0 order-2 lg:order-1">
 					@await RenderPartialAsync(_Breadcrumbs.Create(Model))
 					<article id="markdown-content" class="markdown-content min-w-0">
 						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
 						@await RenderBodyAsync()
 					</article>
 					@await RenderPartialAsync(_PrevNextNav.Create(Model))
 				</div>
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
 			</main>
+			@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
 		</div>
 	</div>
 </div>

src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml

@@ -1,5 +1,5 @@
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
-<aside class="sidebar font-sans bg-white fixed md:sticky shadow-2xl md:shadow-none left-full group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r border-r-grey-20 z-40 md:z-auto transition-[top,max-height] duration-300">
+<aside class="sidebar font-sans bg-white fixed md:sticky shadow-2xl md:shadow-none left-full group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r border-r-grey-20 z-40 md:z-auto transition-[top,max-height] duration-300 md:order-1">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full simple-scrollbar">

src/Elastic.Markdown/Layout/_TableOfContents.cshtml

@@ -1,7 +1,7 @@
 @using Elastic.Documentation.Svg
 @using Microsoft.AspNetCore.Html
 @inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
-<aside class="sidebar md:block w-full lg:max-w-65 md:order-2">
+<aside class="sidebar md:block w-full lg:max-w-65 order-1 lg:order-2">
 	<nav id="toc-nav" class="sidebar-nav lg:h-full flex flex-row-reverse lg:block items-center justify-between md:justify-start gap-4 pb-3 md:pb-9 simple-scrollbar">
 		@if (Model.Features.PrimaryNavEnabled && !Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex && Model.Branding is null)
 		{

src/Elastic.Markdown/_Layout.cshtml

@@ -30,22 +30,22 @@
 						md:px-4
 			">
 				<div class="min-h-screen grid grid-cols-1 md:grid-cols-[var(--max-sidebar-width)_1fr] gap-4">
-					@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
-					<main id="content-container" class="min-w-0 lg:grid lg:grid-cols-[minmax(0,var(--max-text-width))_minmax(0,var(--max-sidebar-width))] justify-end mx-4 gap-4">
-						@await RenderPartialAsync(_TableOfContents.Create(Model))
+					<main id="content-container" class="min-w-0 flex flex-col lg:grid lg:grid-cols-[minmax(0,var(--max-text-width))_minmax(0,var(--max-sidebar-width))] justify-end mx-4 gap-4 md:order-2">
 						@{
 							var breadcrumbs = Model.Breadcrumbs.ToList();
 							var breadcrumbVisible = breadcrumbs.Count > 0 && (breadcrumbs.Count > 1 || Model.BuildType != BuildType.Isolated);
 						}
-						<div class="mb-9 mt-0 min-w-0 @(breadcrumbVisible ? "" : "pt-6")">
+						<div class="mb-9 mt-0 min-w-0 order-2 lg:order-1 @(breadcrumbVisible ? "" : "pt-6")">
 							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
 							<article id="markdown-content" class="markdown-content min-w-0">
 								<input type="checkbox" class="hidden" id="pages-nav-hamburger">
 								@await RenderBodyAsync()
 							</article>
 							@await RenderPartialAsync(_PrevNextNav.Create(Model))
 						</div>
+						@await RenderPartialAsync(_TableOfContents.Create(Model))
 					</main>
+					@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
 				</div>
 			</div>
 		</div>