Fix truncated text in "On this page" nav (#1076)

Author: reakaleek

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

src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml

@@ -11,7 +11,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">

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