From 61ce338b8cdc84d2b1ff31645aea890f25205cfd Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 22:48:39 +0200
Subject: [PATCH] fix: show reading progress indicator on mobile at full width

---
 src/components/ReadingProgressIndicator.tsx | 10 +++++-----
 src/styles/utils/animations.css             |  8 ++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/ReadingProgressIndicator.tsx b/src/components/ReadingProgressIndicator.tsx
index 2e46efa2..ac50e7e3 100644
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -19,7 +19,7 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
 }) => {
   const clampedProgress = Math.min(100, Math.max(0, progress))
   
-  // Calculate left and right offsets based on sidebar states
+  // Calculate left and right offsets based on sidebar states (desktop only)
   const leftOffset = isSidebarCollapsed 
     ? 'var(--sidebar-collapsed-width)' 
     : 'var(--sidebar-width)'
@@ -29,11 +29,11 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
   
   return (
     <div 
-      className={`fixed bottom-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 md:block hidden ${className}`}
+      className={`reading-progress-bar fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
       style={{
-        left: leftOffset,
-        right: rightOffset
-      }}
+        '--left-offset': leftOffset,
+        '--right-offset': rightOffset
+      } as React.CSSProperties}
     >
       <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
         <div 
diff --git a/src/styles/utils/animations.css b/src/styles/utils/animations.css
index 5149c5c3..c88e4818 100644
--- a/src/styles/utils/animations.css
+++ b/src/styles/utils/animations.css
@@ -21,4 +21,12 @@
   75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
 }
 
+/* Reading progress bar positioning */
+@media (min-width: 769px) {
+  .reading-progress-bar {
+    left: var(--left-offset) !important;
+    right: var(--right-offset) !important;
+  }
+}
+