From 8fc416e2bf9f00496fc4774f268fb11b28b27da3 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 24 Apr 2025 10:23:24 +0200
Subject: [PATCH 01/14] Full width layout PoC

---
 .../Assets/markdown/typography.css            |  4 +++
 src/Elastic.Markdown/Assets/styles.css        | 13 +++++--
 .../Slices/Layout/_PrevNextNav.cshtml         |  2 +-
 .../Slices/Layout/_SecondaryNav.cshtml        |  2 +-
 .../Slices/Layout/_TableOfContents.cshtml     |  2 +-
 src/Elastic.Markdown/Slices/_Layout.cshtml    | 36 ++++++++++---------
 6 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index 947c11e5a..e63c63a75 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -47,6 +47,10 @@
 		@apply mt-4;
 		line-height: 1.5em;
 	}
+	
+	#elastic-docs-v3>p {
+		max-width: 80ch;
+	}
 
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index cf7fbcf24..4285c1006 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -98,8 +98,8 @@
 	}
 
 	.content-container {
-		@apply w-full max-w-[80ch];
-	}
+		/*@apply w-full max-w-[90ch];*/
+	}	
 
 	.applies {
 		@apply font-sans;
@@ -239,6 +239,15 @@
 
 #elastic-nav {
 	min-height: var(--offset-top);
+	.oldNav {
+		&>div {
+			max-width: 100%;
+		}
+		div:has(> div > nav) {
+			flex-grow: 1;
+			justify-content: center;
+		}
+	}
 }
 
 body {
diff --git a/src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml
index 09d24f79f..0374f06c8 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml
@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers
 @inherits RazorSlice<LayoutViewModel>
-<footer id="prev-next-nav" class="content-container mt-20 px-6">
+<footer id="prev-next-nav" class="content-container mt-20 px-4">
 	<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-2">
 		<div class="w-full">
 			@if (Model.Previous != null)
diff --git a/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
index 8add59608..137075284 100644
--- a/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
@@ -2,7 +2,7 @@
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorSlice<LayoutViewModel>
 <nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base p-6">
-	<div class="container flex mx-auto justify-between items-center">
+	<div class="flex mx-auto justify-between items-center">
 		<div class="flex gap-2 flex-nowrap items-center">
 			@if (Model.CurrentDocument.YamlFrontMatter?.Layout != LayoutName.LandingPage)
 			{
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index e68631654..f3302f881 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-3">
+<aside class="sidebar hidden lg:block order-2">
 	<nav id="toc-nav" class="sidebar-nav">
 		<div id="page-version-dropdown" tabindex="1"
 		     class="mt-6 block group font-sans text-sm relative z-50">
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index 8e1e53aa1..f02ff53ed 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -23,25 +23,27 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="container h-full grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] lg:grid-cols-[calc(var(--spacing)*65)_1fr_calc(var(--spacing)*50)] px-6">
+			<div class="w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				@await RenderPartialAsync(_TableOfContents.Create(Model))
-				<main id="content-container" class="w-full flex flex-col order-2 relative pb-30 overflow-x-hidden">
-					<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
-						<div class="h-[2px] w-full overflow-hidden">
-							<div class="progress w-full h-full bg-pink-70 left-right"></div>
+				<div class="order-2 grid grid-cols-1 md:grid-cols-[95ch_calc(var(--spacing)*65)] justify-center">
+					@await RenderPartialAsync(_TableOfContents.Create(Model))
+					<main id="content-container" class="w-full flex flex-col order-1 relative pb-30 overflow-x-hidden">
+						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
+							<div class="h-[2px] w-full overflow-hidden">
+								<div class="progress w-full h-full bg-pink-70 left-right"></div>
+							</div>
+							<div class="sr-only">Loading</div>
 						</div>
-						<div class="sr-only">Loading</div>
-					</div>
-					<div class="content-container md:px-4">
-						@await RenderPartialAsync(_Breadcrumbs.Create(Model))
-					</div>
-					<article id="markdown-content" class="content-container markdown-content md:px-4">
-						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
-						@await RenderBodyAsync()
-					</article>
-					@await RenderPartialAsync(_PrevNextNav.Create(Model))
-				</main>
+						<div class="content-container md:px-4">
+							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
+						</div>
+						<article id="markdown-content" class="content-container markdown-content md:px-4">
+							<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+							@await RenderBodyAsync()
+						</article>
+						@await RenderPartialAsync(_PrevNextNav.Create(Model))
+					</main>
+				</div>
 			</div>
 		}
 

From eaca5d3c245b145cc05db4c1a33f79155f10b489 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 24 Apr 2025 10:31:58 +0200
Subject: [PATCH 02/14] Also set max width for other elements

---
 src/Elastic.Markdown/Assets/markdown/typography.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index e63c63a75..c0acbd2b6 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -4,6 +4,7 @@
 	h1 {
 		@apply text-ink-dark text-5xl font-semibold;
 		line-height: 1.2em;
+		max-width: 805px; /* approximately 80ch */
 	}
 
 	h2 {
@@ -48,8 +49,10 @@
 		line-height: 1.5em;
 	}
 	
-	#elastic-docs-v3>p {
-		max-width: 80ch;
+	#elastic-docs-v3 {
+		&>p, &>ul, &>ol, &>.heading-wrapper {
+			max-width: 80ch;
+		}
 	}
 
 	a {

From 2e55f00f4e81d8f4dcc2dc1d4876329096e7e9b5 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 25 Apr 2025 00:57:24 +0200
Subject: [PATCH 03/14] Fixes and fine-tuning

---
 src/Elastic.Markdown/Assets/markdown/code.css |  2 ++
 .../Assets/markdown/typography.css            | 12 +++++-----
 src/Elastic.Markdown/Assets/styles.css        | 24 +++++++++++++------
 src/Elastic.Markdown/Assets/theme.css         |  4 ++--
 .../Slices/Layout/_TableOfContents.cshtml     |  2 +-
 src/Elastic.Markdown/Slices/_Layout.cshtml    |  2 +-
 6 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/markdown/code.css b/src/Elastic.Markdown/Assets/markdown/code.css
index 1c9ea3da1..5d11e9237 100644
--- a/src/Elastic.Markdown/Assets/markdown/code.css
+++ b/src/Elastic.Markdown/Assets/markdown/code.css
@@ -10,6 +10,7 @@
 			background-color: #22272e;
 			mix-blend-mode: unset;
 			line-height: 1.5em;
+			word-break: normal;
 		}
 		code:first-child {
 			@apply rounded-t-sm;
@@ -63,6 +64,7 @@
 		text-decoration: inherit;
 		font-weight: inherit;
 		mix-blend-mode: multiply;
+		word-break: break-word;
 	}
 
 	.hljs-built_in,
diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index c0acbd2b6..9e2ba93e7 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -4,7 +4,7 @@
 	h1 {
 		@apply text-ink-dark text-5xl font-semibold;
 		line-height: 1.2em;
-		max-width: 805px; /* approximately 80ch */
+		/*max-width: 805px; !* approximately 80ch *!*/
 	}
 
 	h2 {
@@ -49,11 +49,11 @@
 		line-height: 1.5em;
 	}
 	
-	#elastic-docs-v3 {
-		&>p, &>ul, &>ol, &>.heading-wrapper {
-			max-width: 80ch;
-		}
-	}
+	/*#elastic-docs-v3 {*/
+	/*	&>p, &>ul, &>ol, &>.heading-wrapper, &>dl {*/
+	/*		max-width: 80ch;*/
+	/*	}*/
+	/*}*/
 
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 4285c1006..3a657ddcf 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -233,20 +233,30 @@
 
 .container {
 	@apply lg:px-3;
-
 	max-width: 1250px !important;
 }
 
 #elastic-nav {
 	min-height: var(--offset-top);
-	.oldNav {
-		&>div {
-			max-width: 100%;
+
+	@media screen and (min-width: 1200px) {
+		.oldNav {
+			&>div {
+				max-width: 100%;
+			}
+			div:has(> div > nav) {
+				flex-grow: 1;
+				justify-content: center;
+			}
 		}
-		div:has(> div > nav) {
-			flex-grow: 1;
-			justify-content: center;
+	}
+	@media screen and (min-width: 1536px) {
+		.oldNav {
+			nav {
+				margin-left: -74px;
+			}
 		}
+		
 	}
 }
 
diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css
index f41837d23..8674a15ec 100644
--- a/src/Elastic.Markdown/Assets/theme.css
+++ b/src/Elastic.Markdown/Assets/theme.css
@@ -2,8 +2,8 @@
 	--breakpoint-sm: 640px;
 	--breakpoint-md: 768px;
 	--breakpoint-lg: 1280px;
-	--breakpoint-xl: 1920px;
-	--breakpoint-2xl: 2000px;
+	--breakpoint-xl: 1536px;
+	--breakpoint-2xl: 1920px;
 
 	--font-sans:
 		'Mier B', 'Inter', ui-sans-serif, system-ui, sans-serif,
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index f3302f881..177c9b617 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-2">
+<aside class="sidebar hidden lg:block order-2 max-w-65">
 	<nav id="toc-nav" class="sidebar-nav">
 		<div id="page-version-dropdown" tabindex="1"
 		     class="mt-6 block group font-sans text-sm relative z-50">
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index f02ff53ed..6aeab8cac 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -25,7 +25,7 @@
 		{
 			<div class="w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="order-2 grid grid-cols-1 md:grid-cols-[95ch_calc(var(--spacing)*65)] justify-center">
+				<div class="order-2 grid grid-cols-1 md:grid-cols-[clamp(40ch,80ch,100%)] lg:grid-cols-[80ch_1fr] xl:grid-cols-[90ch_calc(var(--spacing)*65)] justify-center">
 					@await RenderPartialAsync(_TableOfContents.Create(Model))
 					<main id="content-container" class="w-full flex flex-col order-1 relative pb-30 overflow-x-hidden">
 						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">

From 32eee216860c26bd58c87ff444a92767da4c72dc Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 25 Apr 2025 00:59:17 +0200
Subject: [PATCH 04/14] Cleanup

---
 src/Elastic.Markdown/Assets/markdown/typography.css | 7 -------
 src/Elastic.Markdown/Assets/styles.css              | 4 ----
 2 files changed, 11 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index 9e2ba93e7..947c11e5a 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -4,7 +4,6 @@
 	h1 {
 		@apply text-ink-dark text-5xl font-semibold;
 		line-height: 1.2em;
-		/*max-width: 805px; !* approximately 80ch *!*/
 	}
 
 	h2 {
@@ -48,12 +47,6 @@
 		@apply mt-4;
 		line-height: 1.5em;
 	}
-	
-	/*#elastic-docs-v3 {*/
-	/*	&>p, &>ul, &>ol, &>.heading-wrapper, &>dl {*/
-	/*		max-width: 80ch;*/
-	/*	}*/
-	/*}*/
 
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 3a657ddcf..257907c05 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -97,10 +97,6 @@
 		}
 	}
 
-	.content-container {
-		/*@apply w-full max-w-[90ch];*/
-	}	
-
 	.applies {
 		@apply font-sans;
 		border-bottom: 1px solid var(--color-grey-20);

From 79181084e2211a3548c3b2e7f4b5ebb07550293f Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 25 Apr 2025 01:01:17 +0200
Subject: [PATCH 05/14] Fix isolated build header position

---
 src/Elastic.Markdown/Slices/Layout/_Header.cshtml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
index e0580386f..64e70dc3e 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
@@ -8,7 +8,6 @@
 else
 {
 	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
-		<div class="container mx-auto">
 			<div class="flex justify-between items-center">
 				@* ReSharper disable once Html.IdNotResolved *@
 				<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
@@ -21,6 +20,5 @@ else
 					@Model.DocSetName
 				</a>
 			</div>
-		</div>
 	</header>
 }

From 491cfda3851d717d58ba9437c8c079f288ba236f Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 25 Apr 2025 01:01:32 +0200
Subject: [PATCH 06/14] Formatting

---
 .../Slices/Layout/_Header.cshtml              | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
index 64e70dc3e..f74454afc 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
@@ -8,17 +8,17 @@
 else
 {
 	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
-			<div class="flex justify-between items-center">
-				@* ReSharper disable once Html.IdNotResolved *@
-				<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
-					</svg>
-				</label>
-				<a href="@Model.Link("/")" class="flex items-center gap-2">
-					<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
-					@Model.DocSetName
-				</a>
-			</div>
+		<div class="flex justify-between items-center">
+			@* ReSharper disable once Html.IdNotResolved *@
+			<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
+				</svg>
+			</label>
+			<a href="@Model.Link("/")" class="flex items-center gap-2">
+				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
+				@Model.DocSetName
+			</a>
+		</div>
 	</header>
 }

From d573cea81d617836f60689e03f405488bb81b3f9 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 25 Apr 2025 01:03:14 +0200
Subject: [PATCH 07/14] Prettier

---
 src/Elastic.Markdown/Assets/styles.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 257907c05..3dc1b377e 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -237,7 +237,7 @@
 
 	@media screen and (min-width: 1200px) {
 		.oldNav {
-			&>div {
+			& > div {
 				max-width: 100%;
 			}
 			div:has(> div > nav) {
@@ -252,7 +252,6 @@
 				margin-left: -74px;
 			}
 		}
-		
 	}
 }
 

From b82f3df6a55476dda470ccf5b94bf2cb3237549d Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 29 Apr 2025 12:06:02 +0200
Subject: [PATCH 08/14] Limited max width PoC

---
 src/Elastic.Markdown/Assets/styles.css                  | 4 +++-
 src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml | 4 ++--
 src/Elastic.Markdown/Slices/_Layout.cshtml              | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 3dc1b377e..d27b963da 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,6 +24,7 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
+	--max-layout-width: 1800px;
 }
 
 @media screen and (min-width: 767px) {
@@ -238,7 +239,8 @@
 	@media screen and (min-width: 1200px) {
 		.oldNav {
 			& > div {
-				max-width: 100%;
+				width: 100%;
+				max-width: var(--max-layout-width);
 			}
 			div:has(> div > nav) {
 				flex-grow: 1;
diff --git a/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
index 137075284..ce0a3669b 100644
--- a/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml
@@ -1,8 +1,8 @@
 @using Elastic.Markdown.Helpers
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorSlice<LayoutViewModel>
-<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base p-6">
-	<div class="flex mx-auto justify-between items-center">
+<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base">
+	<div class="max-w-(--max-layout-width) flex mx-auto justify-between items-center p-6">
 		<div class="flex gap-2 flex-nowrap items-center">
 			@if (Model.CurrentDocument.YamlFrontMatter?.Layout != LayoutName.LandingPage)
 			{
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index 6aeab8cac..1277338e2 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -23,7 +23,7 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
+			<div class="max-w-(--max-layout-width) w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
 				<div class="order-2 grid grid-cols-1 md:grid-cols-[clamp(40ch,80ch,100%)] lg:grid-cols-[80ch_1fr] xl:grid-cols-[90ch_calc(var(--spacing)*65)] justify-center">
 					@await RenderPartialAsync(_TableOfContents.Create(Model))

From 600d8680a3cf4c528d70fc435cb7f63818be20ca Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 29 Apr 2025 13:10:02 +0200
Subject: [PATCH 09/14] Use common resolution width

---
 src/Elastic.Markdown/Assets/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index d27b963da..874b7495f 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,7 +24,7 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1800px;
+	--max-layout-width: 1920px;
 }
 
 @media screen and (min-width: 767px) {

From 8d0cb89204f4cb865b1a00ada34bd30ed7c37067 Mon Sep 17 00:00:00 2001
From: Martijn Laarman <Mpdreamz@gmail.com>
Date: Tue, 29 Apr 2025 20:42:31 +0200
Subject: [PATCH 10/14] Dynamic spacing for max-width layout

---
 src/Elastic.Markdown/Assets/styles.css             |  4 +++-
 .../Slices/Layout/_PagesNav.cshtml                 |  2 +-
 .../Slices/Layout/_TableOfContents.cshtml          |  2 +-
 src/Elastic.Markdown/Slices/_Layout.cshtml         | 14 ++++++++++----
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 874b7495f..d662628ec 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,7 +24,9 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1920px;
+	--max-layout-width: 1450px;
+	--max-sidebar-width: calc(var(--spacing) * 65);
+	--max-content-width: calc(var(--max-layout-width) - (var(--max-sidebar-width) * 2))
 }
 
 @media screen and (min-width: 767px) {
diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index e864e9cab..5c1ebc0d8 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)]  order-1 w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
+<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full"
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index 177c9b617..b859d2c2d 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-2 max-w-65">
+<aside class="sidebar hidden lg:block max-w-65 md:hidden" >
 	<nav id="toc-nav" class="sidebar-nav">
 		<div id="page-version-dropdown" tabindex="1"
 		     class="mt-6 block group font-sans text-sm relative z-50">
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index 1277338e2..fe06fdb52 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -23,11 +23,15 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="max-w-(--max-layout-width) w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
+			<div class="max-w-(--max-layout-width) w-full h-full grid px-6
+					grid-cols-1
+					md:grid-cols-[var(--max-sidebar-width)_1fr]
+					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
+				">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="order-2 grid grid-cols-1 md:grid-cols-[clamp(40ch,80ch,100%)] lg:grid-cols-[80ch_1fr] xl:grid-cols-[90ch_calc(var(--spacing)*65)] justify-center">
-					@await RenderPartialAsync(_TableOfContents.Create(Model))
-					<main id="content-container" class="w-full flex flex-col order-1 relative pb-30 overflow-x-hidden">
+				<div class="justify-center grid grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]">
+					<div class="spacer"></div>
+					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
 						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 							<div class="h-[2px] w-full overflow-hidden">
 								<div class="progress w-full h-full bg-pink-70 left-right"></div>
@@ -43,7 +47,9 @@
 						</article>
 						@await RenderPartialAsync(_PrevNextNav.Create(Model))
 					</main>
+					<div class="spacer"></div>
 				</div>
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
 			</div>
 		}
 

From 51919326b2dbe21d4b777166a6c7c535978a952d Mon Sep 17 00:00:00 2001
From: Martijn Laarman <Mpdreamz@gmail.com>
Date: Tue, 29 Apr 2025 21:01:48 +0200
Subject: [PATCH 11/14] ensure margins are dynamic again

---
 src/Elastic.Markdown/Assets/styles.css     | 2 +-
 src/Elastic.Markdown/Slices/_Layout.cshtml | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index d662628ec..18a45fcaf 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,7 +24,7 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1450px;
+	--max-layout-width: 1500px;
 	--max-sidebar-width: calc(var(--spacing) * 65);
 	--max-content-width: calc(var(--max-layout-width) - (var(--max-sidebar-width) * 2))
 }
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index fe06fdb52..ecfa0f8d5 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -29,7 +29,10 @@
 					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
 				">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="justify-center grid grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]">
+				<div class="justify-center px-6 grid
+					grid-cols-1
+					lg:grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]
+					">
 					<div class="spacer"></div>
 					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
 						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">

From a1ef063b7b70e7fe8872312b01f00e363e62e8f7 Mon Sep 17 00:00:00 2001
From: Martijn Laarman <Mpdreamz@gmail.com>
Date: Tue, 29 Apr 2025 21:05:03 +0200
Subject: [PATCH 12/14] fix css lint

---
 src/Elastic.Markdown/Assets/styles.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 18a45fcaf..860f01275 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -26,7 +26,9 @@
 	--offset-top: 72px;
 	--max-layout-width: 1500px;
 	--max-sidebar-width: calc(var(--spacing) * 65);
-	--max-content-width: calc(var(--max-layout-width) - (var(--max-sidebar-width) * 2))
+	--max-content-width: calc(
+		var(--max-layout-width) - (var(--max-sidebar-width) * 2)
+	);
 }
 
 @media screen and (min-width: 767px) {

From 32403153bf895c908dce4c0ac8f4be03621c0fd3 Mon Sep 17 00:00:00 2001
From: Martijn Laarman <Mpdreamz@gmail.com>
Date: Wed, 30 Apr 2025 11:20:33 +0200
Subject: [PATCH 13/14] Slight on this page margin adjustments (#1198)

---
 .../Slices/Layout/_TableOfContents.cshtml     | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index b859d2c2d..4556c0369 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block max-w-65 md:hidden" >
+<aside class="sidebar hidden lg:block max-w-65 md:hidden">
 	<nav id="toc-nav" class="sidebar-nav">
 		<div id="page-version-dropdown" tabindex="1"
 		     class="mt-6 block group font-sans text-sm relative z-50">
@@ -57,17 +57,42 @@
 				</ul>
 			</div>
 		</div>
-		<div class="pt-6 pb-20 pl-4">
+		<ul class="mt-6">
+
+			@if (Model.GithubEditUrl is not null)
+			{
+				<li class="edit-this-page not-first:mt-1">
+					<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
+
+
+						<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
+						</svg>
+
+						Edit this page
+					</a>
+				</li>
+				<li class="report-an-issue not-first:mt-1">
+					<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
+						<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+							<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
+						</svg>
+						Report an issue
+					</a>
+				</li>
+			}
+		</ul>
+		<div class="pt-6">
 			@if (Model.PageTocItems.Count > 0)
 			{
 				<div>
 					<div class="font-bold mb-2">On this page</div>
 					<div class="relative toc-progress-container font-body">
-						<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
+						<div class="toc-progress-indicator absolute top-0 h-0 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
 						<ul class="block w-full">
 							@foreach (var item in Model.PageTocItems)
 							{
-								<li class="has-[:hover]:border-l-grey-80 items-center ml-2 px-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
+								<li class="has-[:hover]:border-l-grey-80 items-center px-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
 									<a
 										class="sidebar-link inline-block my-1.5 @(item.Level == 3 ? "ml-4" : string.Empty)"
 										href="#@item.Slug">
@@ -80,31 +105,6 @@
 				</div>
 			}
 
-			<ul class="mt-6">
-
-				@if (Model.GithubEditUrl is not null)
-				{
-					<li class="edit-this-page not-first:mt-1">
-						<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
-
-
-							<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-								<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
-							</svg>
-
-							Edit this page
-						</a>
-					</li>
-					<li class="report-an-issue not-first:mt-1">
-						<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
-							<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
-							</svg>
-							Report an issue
-						</a>
-					</li>
-				}
-			</ul>
 		</div>
 
 	</nav>

From 8415fc85602baa458c139d0ebb30fe15761f9e9a Mon Sep 17 00:00:00 2001
From: Martijn Laarman <Mpdreamz@gmail.com>
Date: Wed, 30 Apr 2025 22:46:28 +0200
Subject: [PATCH 14/14] feature/limited width layout 4 (#1201)

* fixate max-width around max content-width

* npm fix lint

* Update src/Elastic.Markdown/Slices/_Layout.cshtml

Co-authored-by: Jan Calanog <jan.calanog@elastic.co>

---------

Co-authored-by: Jan Calanog <jan.calanog@elastic.co>
---
 src/Elastic.Markdown/Assets/styles.css             | 14 ++++++++++----
 src/Elastic.Markdown/Slices/Layout/_Footer.cshtml  |  6 ++++--
 src/Elastic.Markdown/Slices/Layout/_Header.cshtml  |  4 ++--
 .../Slices/Layout/_LandingPage.cshtml              |  2 +-
 .../Slices/Layout/_PagesNav.cshtml                 |  2 +-
 src/Elastic.Markdown/Slices/_Layout.cshtml         |  7 ++++---
 6 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 860f01275..e1b19ba7a 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -24,10 +24,12 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1500px;
+	--max-text-width: clamp(40ch, 90ch, 100%);
 	--max-sidebar-width: calc(var(--spacing) * 65);
-	--max-content-width: calc(
-		var(--max-layout-width) - (var(--max-sidebar-width) * 2)
+	--content-spacing: calc(var(--spacing) * 8);
+	--max-layout-width: calc(
+		var(--max-text-width) + (var(--max-sidebar-width) * 2) +
+			calc(var(--content-spacing) * 2)
 	);
 }
 
@@ -234,7 +236,11 @@
 
 .container {
 	@apply lg:px-3;
-	max-width: 1250px !important;
+	max-width: var(--max-layout-width) !important;
+
+	* {
+		@apply font-body;
+	}
 }
 
 #elastic-nav {
diff --git a/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml b/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
index fb3c41449..e8f98644f 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
@@ -1,13 +1,14 @@
 @inherits RazorSlice<LayoutViewModel>
 
 
-<footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
+<footer class="py-12 px-6 w-full mx-auto bg-ink-dark">
 	<div class="max-w-(--max-layout-width) w-full mx-auto">
+	<div class="text-grey-20 text-[12px]">
 		<a href="https://www.elastic.co/">
 			<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
 		</a>
 	</div>
-	<div class="max-w-(--max-layout-width) w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
+	<div class="text-grey-20 text-[12px] bg-ink-dark grid grid-cols-1 md:grid-cols-2 gap-2 items-center">
 		<div>
 			<ul class="mt-4 flex gap-3">
 				<li>
@@ -31,6 +32,7 @@
 			Elasticsearch is a trademark of Elasticsearch B.V., registered in the U.S. and in other countries. Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant logo are trademarks of the Apache Software Foundation in the United States and/or other countries.
 		</p>
 	</div>
+	</div>
 </footer>
 
 <script src="@Model.Static("main.js")"></script>
diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
index 76d6cf4d1..1ff6906cf 100644
--- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml
@@ -7,7 +7,7 @@
 }
 else
 {
-	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
+	<header class="sticky top-0 z-50 bg-blue-developer text-white h-(--offset-top) flex items-center">
 		<div class="max-w-(--max-layout-width) w-full mx-auto flex justify-between items-center">
 			@* ReSharper disable once Html.IdNotResolved *@
 			<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
@@ -15,7 +15,7 @@ else
 					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
 				</svg>
 			</label>
-			<a href="@Model.Link("/")" class="flex items-center gap-2">
+			<a href="@Model.Link("/")" class="flex items-center gap-2 text-lg font-semibold px-4">
 				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
 				@Model.DocSetName
 			</a>
diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index d9e729800..27fc1c1cf 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<div class="w-full font-body text-ink relative text-pretty">
+<div class="w-full text-ink relative text-pretty">
 	<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 		<div class="h-[2px] w-full overflow-hidden">
 			<div class="progress w-full h-full bg-pink-70 left-right"></div>
diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index 5c1ebc0d8..43b34754b 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
+<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-2 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav h-full"
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index ecfa0f8d5..0838d11c0 100644
--- a/src/Elastic.Markdown/Slices/_Layout.cshtml
+++ b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -23,15 +23,16 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="max-w-(--max-layout-width) w-full h-full grid px-6
+			<div class="max-w-(--max-layout-width) w-full h-full grid
 					grid-cols-1
 					md:grid-cols-[var(--max-sidebar-width)_1fr]
 					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
 				">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="justify-center px-6 grid
+				<div class="justify-center grid
 					grid-cols-1
-					lg:grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]
+					px-6 lg:px-0
+					lg:grid-cols-[1fr_var(--max-text-width)_1fr]
 					">
 					<div class="spacer"></div>
 					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">