Fix content spacing and hamburger placement in mobile (#2676)

* Fix content spacing and hamburger placement in mobile

* Reduce space a little more

Author: reakaleek

src/Elastic.Markdown/Layout/_TableOfContents.cshtml

@@ -1,6 +1,6 @@
 @inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
 <aside class="sidebar md:block w-full lg:max-w-65 md: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-9 simple-scrollbar">
+	<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.VersioningSystem.IsVersionless)
 		{
 			<div class="mt-4">
@@ -9,6 +9,10 @@
 				</version-dropdown>
 			</div>
 		}
+		else
+		{
+			<div>@* empty placeholder so flebox still works as expected*@</div>
+		}
 
 		@if (Model.RenderHamburgerIcon)
 		{

src/Elastic.Markdown/_Layout.cshtml

@@ -33,7 +33,7 @@
 					@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))
-						<div class="mt-16 mb-9 md:mt-0 min-w-0">
+						<div class="mb-9 mt-0 min-w-0">
 							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
 							<article id="markdown-content" class="markdown-content min-w-0">
 								<input type="checkbox" class="hidden" id="pages-nav-hamburger">