From 3e370718d9cd6adbe8cd41f88490391c38f082de Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 13:51:06 +0200
Subject: [PATCH] Fix truncated text in "On this page" nav

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

diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 575158ec4..10f2d2db1 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -92,6 +92,7 @@
 
 		.sidebar-link {
 			@apply text-ink-light inline-block leading-[1.2em] text-pretty hover:text-black md:text-sm;
+			word-break: break-word;
 		}
 	}
 
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index f58e284de..f19a8c0ea 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -49,7 +49,7 @@
 						<ul class="block w-full">
 							@foreach (var item in Model.PageTocItems)
 							{
-								<li class="has-[:hover]:border-l-grey-80 items-center ml-2 pl-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
+								<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!">
 									<a
 										class="sidebar-link inline-block my-1.5 @(item.Level == 3 ? "ml-4" : string.Empty)"
 										href="#@item.Slug">
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
index a1aaf8019..b1aac62a3 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="container h-full grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_auto] lg:grid-cols-[calc(var(--spacing)*65)_auto_calc(var(--spacing)*50)] px-6">
+			<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">
 				@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">