From 27c0c687b1f5e1e9fee2ec43f126ea4de2ab44f3 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 16:56:12 +0200
Subject: [PATCH] style: Update class attribute to id in DocsLayout

---
 app/layouts/DocsLayout.tsx       |  7 +++++--
 app/partials/ReadProgressBar.tsx | 25 ++++++++++---------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index 42b2ee9..9ca584d 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -22,8 +22,11 @@ export function DocsLayout(props: DocsLayoutProps) {
 
 	return (
 		<>
-			<main class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
-				<article id="article-content">
+			<main
+				id="article-content"
+				class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
+			>
+				<article>
 					<DocsHeader
 						title={pageContext.exports.frontmatter?.title}
 						estimatedReadingTime={pageContext.exports.readingTime?.text}
diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx
index 5396a29..e1f807e 100644
--- a/app/partials/ReadProgressBar.tsx
+++ b/app/partials/ReadProgressBar.tsx
@@ -9,24 +9,17 @@ export function ReadProgressBar() {
 
 	const handleScroll = () => {
 		const articleHeight = articleContentElement.scrollHeight;
-		const articleTopPosition =
-			articleContentElement.getBoundingClientRect().top;
+		const topPosition = articleContentElement.getBoundingClientRect().top;
 		const windowHeight = window.innerHeight;
 
-		// Calculer la hauteur visible de l'élément dans la fenêtre
-		const visibleHeight = Math.min(
-			articleHeight,
-			windowHeight + articleTopPosition,
-		);
+		if (articleHeight <= windowHeight) {
+			setWidth("100%");
+			return;
+		}
 
-		// Calculer la position de défilement relative à l'élément
-		const elementScrollTop = -articleTopPosition;
-
-		// Calculer le pourcentage de défilement relatif à l'élément
-		const percentage =
-			(elementScrollTop / (articleHeight - windowHeight)) * 100;
-
-		// Limiter le pourcentage entre 0 et 100
+		const elementScrollTop = -topPosition;
+		const scrollableHeight = articleHeight - windowHeight;
+		const percentage = (elementScrollTop / scrollableHeight) * 100;
 		const clampedPercentage = Math.max(0, Math.min(100, percentage));
 
 		setWidth(`${clampedPercentage}%`);
@@ -34,11 +27,13 @@ export function ReadProgressBar() {
 
 	createEffect(() => {
 		window.addEventListener("scroll", handleScroll);
+		window.addEventListener("resize", handleScroll);
 
 		handleScroll();
 
 		return () => {
 			window.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("resize", handleScroll);
 		};
 	});