Fix layout and horizontal scrollable tables

src/Elastic.Markdown/Assets/markdown/table.css

@@ -1,8 +1,21 @@
+
 @layer components {
+
 	.table-wrapper {
 
-		@apply max-w-full overflow-x-scroll my-4;
+		@apply w-full overflow-x-scroll my-4;
+
+		&::-webkit-scrollbar {
+			@apply h-2 bg-grey-10 border-b-1 border-grey-20;
+		}
+		&::-webkit-scrollbar-thumb {
+			@apply bg-grey-80 rounded-full;
+		}
 
+		&::-webkit-scrollbar-thumb:hover {
+			@apply bg-grey-100;
+		}
+
 		table {
 			@apply w-full border-collapse border-1 border-grey-20;
 		}
@@ -13,6 +26,9 @@
 
 		thead {
 			@apply font-sans font-semibold text-left align-top border-b-1 border-grey-20 bg-grey-10;
+			:empty {
+				display: none;
+			}
 		}
 
 		tbody {

src/Elastic.Markdown/Helpers/Htmx.cs

@@ -14,7 +14,7 @@ public static string GetHxSelectOob(FeatureFlags features, string? pathPrefix, s
 		if (features.IsPrimaryNavEnabled && currentUrl == pathPrefix + "/")
 			return "#main-container,#primary-nav,#secondary-nav";
 
-		var selectTargets = "#primary-nav,#secondary-nav,#content-container";
+		var selectTargets = "#primary-nav,#secondary-nav,#content-container,#toc-nav";
 		if (!HasSameTopLevelGroup(pathPrefix, currentUrl, targetUrl) && features.IsPrimaryNavEnabled)
 			selectTargets += ",#pages-nav";
 		return selectTargets;

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-60 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)]  order-1 w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 
 	<nav
 		id="pages-nav"

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

@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-grey-20 w-60">
+<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-grey-20">
 	<nav id="toc-nav" class="sidebar-nav pl-6">
 		<div class="pt-6 pb-20">
 			@if (Model.PageTocItems.Count > 0)

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

@@ -34,7 +34,7 @@
 							class="hover:underline hover:text-black active:text-blue-elastic-100 font-semibold text-sm @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
 							href="@item.Group.Index.Url"
 							hx-get="@item.Group.Index.Url"
-							hx-select-oob="#pages-nav,#content-container"
+							hx-select-oob="#pages-nav,#content-container,#toc-nav"
 							hx-push-url="true"
 							preload>@item.Group.Index.NavigationTitle</a>
 					</li>

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -13,27 +13,25 @@
 	@functions {
 		private async Task DefaultLayout()
 		{
-			<div class="flex container">
+			<div class="grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*60)_auto] lg:grid-cols-[1fr_3fr_1fr] gap-4 container">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div id="content-container" class="order-2 flex w-full">
-					@await RenderPartialAsync(_TableOfContents.Create(Model))
-					<main class="w-full order-1 relative pb-30">
-						<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>
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
+				<main id="content-container" class="w-full 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>
-						<div class="content-container md:px-6">
-							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
-						</div>
-						<article id="markdown-content" class="content-container markdown-content md:px-6">
-							<input type="checkbox" class="hidden" id="pages-nav-hamburger">
-							@await RenderBodyAsync()
-						</article>
-						@await RenderPartialAsync(_PrevNextNav.Create(Model))
-					</main>
-				</div>
+						<div class="sr-only">Loading</div>
+					</div>
+					<div class="content-container md:px-6">
+						@await RenderPartialAsync(_Breadcrumbs.Create(Model))
+					</div>
+					<article id="markdown-content" class="content-container markdown-content md:px-6">
+						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+						@await RenderBodyAsync()
+					</article>
+					@await RenderPartialAsync(_PrevNextNav.Create(Model))
+				</main>
 			</div>
 		}
 	}

tests/Elastic.Markdown.Tests/Inline/AnchorLinkTests.cs

@@ -75,7 +75,7 @@ [Sub Requirements](testing/req.md#sub-requirements)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -93,7 +93,7 @@ [Sub Requirements](testing/req.md#new-reqs)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -110,7 +110,7 @@ public class ExternalPageAnchorAutoTitleTests(ITestOutputHelper output) : Anchor
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -146,7 +146,7 @@ [Sub Requirements](testing/req.md#sub-requirements2)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -165,7 +165,7 @@ [Heading inside dropdown](testing/req.md#heading-inside-dropdown)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
+			"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
 		);
 	[Fact]
 	public void HasError() => Collector.Diagnostics.Should().HaveCount(0);

tests/Elastic.Markdown.Tests/Inline/DirectiveBlockLinkTests.cs

@@ -66,7 +66,7 @@ [Sub Requirements](testing/req.md#hint_ref)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
 		);
 
 	[Fact]

tests/Elastic.Markdown.Tests/Inline/InlineAnchorTests.cs

@@ -200,7 +200,7 @@ [Sub Requirements](testing/req.md#custom-anchor)
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
 		);
 
 	[Fact]

tests/Elastic.Markdown.Tests/Inline/InlineLinkTests.cs

@@ -49,7 +49,7 @@ public class InlineLinkTests(ITestOutputHelper output) : LinkTestBase(output,
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
+			"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
 		);
 
 	[Fact]
@@ -66,7 +66,7 @@ public class LinkToPageTests(ITestOutputHelper output) : LinkTestBase(output,
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -86,7 +86,7 @@ public class InsertPageTitleTests(ITestOutputHelper output) : LinkTestBase(outpu
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
+			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
 		);
 
 	[Fact]
@@ -108,7 +108,7 @@ public class LinkReferenceTest(ITestOutputHelper output) : LinkTestBase(output,
 	public void GeneratesHtml() =>
 		// language=html
 		Html.Should().Contain(
-			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
+			"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
 		);
 
 	[Fact]
@@ -270,10 +270,10 @@ public void GeneratesHtml() =>
 		Html.ReplaceLineEndings().TrimEnd().Should().Be("""
 		<p>Links:</p>
 		<ul>
-		<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
+		<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
 		</ul>
 		<ul>
-		<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
+		<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#primary-nav,#secondary-nav,#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
 		</ul>
 		""".ReplaceLineEndings());