From b1e8b125d41005d3a7a6d40c9e3ae8e30cc1f981 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Sat, 15 Mar 2025 02:33:11 +0100
Subject: [PATCH 1/2] Fix table of contents progress indicator

---
 src/Elastic.Markdown/Assets/toc-nav.ts                     | 6 +++---
 src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/toc-nav.ts b/src/Elastic.Markdown/Assets/toc-nav.ts
index 61bbb950b..a76d55f69 100644
--- a/src/Elastic.Markdown/Assets/toc-nav.ts
+++ b/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 HTMLUListElement;
 	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
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
index 832720fb9..a78a144e8 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
@@ -6,8 +6,9 @@
 			{
 				<div class="mb-4">
 					<div class="font-bold mb-2">On this page</div>
-					<ul class="block w-full relative">
-						<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
+					<div class="relative toc-progress-container">
+					<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!">
@@ -19,6 +20,7 @@
 							</li>
 						}
 					</ul>
+					</div>
 				</div>
 			}
 			<div class="edit-this-page">

From ebbb539fda79b8c7d03cc0c6fa04edc673f8f98f Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Sat, 15 Mar 2025 02:34:47 +0100
Subject: [PATCH 2/2] Update src/Elastic.Markdown/Assets/toc-nav.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/Elastic.Markdown/Assets/toc-nav.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Assets/toc-nav.ts b/src/Elastic.Markdown/Assets/toc-nav.ts
index a76d55f69..48e870171 100644
--- a/src/Elastic.Markdown/Assets/toc-nav.ts
+++ b/src/Elastic.Markdown/Assets/toc-nav.ts
@@ -14,7 +14,7 @@ const HEADING_OFFSET = 34 * 4;
 function initializeTocElements(): TocElements {
 	const headings = $$('#markdown-content h2, #markdown-content h3');
 	const tocLinks = $$('#toc-nav li>a') as HTMLAnchorElement[];
-	const tocContainer = $('#toc-nav .toc-progress-container') as HTMLUListElement;
+	const tocContainer = $('#toc-nav .toc-progress-container') as HTMLDivElement;
 	const progressIndicator = $('.toc-progress-indicator', tocContainer) as HTMLDivElement;
 	return { headings, tocLinks, tocContainer, progressIndicator };
 }