Fix table of contents progress indicator (#752)

* Fix table of contents progress indicator

* Update src/Elastic.Markdown/Assets/toc-nav.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: reakaleek

src/Elastic.Markdown/Assets/toc-nav.ts

@@ -12,11 +12,11 @@ interface TocElements {
 const HEADING_OFFSET = 34 * 4; 
 
 function initializeTocElements(): TocElements {
-	const headings = $$('h2, h3');
+	const headings = $$('#markdown-content h2, #markdown-content h3');
 	const tocLinks = $$('#toc-nav li>a') as HTMLAnchorElement[];
-	const tocContainer = $('#toc-nav ul') as HTMLUListElement;
+	const tocContainer = $('#toc-nav .toc-progress-container') as HTMLDivElement;
 	const progressIndicator = $('.toc-progress-indicator', tocContainer) as HTMLDivElement;
-	return { headings, tocLinks, tocContainer,progressIndicator };
+	return { headings, tocLinks, tocContainer, progressIndicator };
 }
 
 // Find the current TOC links based on visible headings

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

@@ -6,19 +6,21 @@
 			{
 				<div class="mb-4">
 					<div class="font-bold mb-2">On this page</div>
-					<ul class="block w-full relative 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>
-						@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!">
-								<a
-									class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
-									href="#@item.Slug">
-									@item.Heading
-								</a>
-							</li>
-						}
-					</ul>
+					<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>
+					    <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!">
+								  <a
+									  class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
+									  href="#@item.Slug">
+									  @item.Heading
+								  </a>
+							  </li>
+						  }
+					  </ul>
+					</div>
 				</div>
 			}
 			<div class="edit-this-page">