From 607f3d46f07d39b7a76882423857d23e79613cfd Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 22:44:59 +0200
Subject: [PATCH] fix: remove sidebar margins and constrain reading progress
 bar to content pane

---
 src/components/ContentPanel.tsx             |  9 ++++++++-
 src/components/ReadingProgressIndicator.tsx | 22 +++++++++++++++++++--
 src/components/ThreePaneLayout.tsx          |  2 ++
 src/styles/layout/app.css                   |  4 ++++
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index d9324bff..837b4314 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -61,6 +61,9 @@ interface ContentPanelProps {
   // For highlight creation
   onTextSelection?: (text: string) => void
   onClearSelection?: () => void
+  // For reading progress indicator positioning
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -85,7 +88,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   currentUserPubkey,
   followedPubkeys = new Set(),
   onTextSelection,
-  onClearSelection
+  onClearSelection,
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
   const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
@@ -381,6 +386,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           progress={progressPercentage}
           isComplete={isReadingComplete}
           showPercentage={true}
+          isSidebarCollapsed={isSidebarCollapsed}
+          isHighlightsCollapsed={isHighlightsCollapsed}
         />
       )}
       
diff --git a/src/components/ReadingProgressIndicator.tsx b/src/components/ReadingProgressIndicator.tsx
index 8de3f907..2e46efa2 100644
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -5,18 +5,36 @@ interface ReadingProgressIndicatorProps {
   isComplete?: boolean
   showPercentage?: boolean
   className?: string
+  isSidebarCollapsed?: boolean
+  isHighlightsCollapsed?: boolean
 }
 
 export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> = ({
   progress,
   isComplete = false,
   showPercentage = true,
-  className = ''
+  className = '',
+  isSidebarCollapsed = false,
+  isHighlightsCollapsed = false
 }) => {
   const clampedProgress = Math.min(100, Math.max(0, progress))
   
+  // Calculate left and right offsets based on sidebar states
+  const leftOffset = isSidebarCollapsed 
+    ? 'var(--sidebar-collapsed-width)' 
+    : 'var(--sidebar-width)'
+  const rightOffset = isHighlightsCollapsed 
+    ? 'var(--highlights-collapsed-width)' 
+    : 'var(--highlights-width)'
+  
   return (
-    <div className={`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}`}>
+    <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}`}
+      style={{
+        left: leftOffset,
+        right: rightOffset
+      }}
+    >
       <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
         <div 
           className={`h-full rounded-full transition-all duration-300 relative ${
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 6cc9293c..48b7011f 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -345,6 +345,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               relayPool={props.relayPool}
               activeAccount={props.activeAccount}
               currentArticle={props.currentArticle}
+              isSidebarCollapsed={props.isCollapsed}
+              isHighlightsCollapsed={props.isHighlightsCollapsed}
             />
           )}
         </div>
diff --git a/src/styles/layout/app.css b/src/styles/layout/app.css
index 17e43615..b53d33bb 100644
--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -43,6 +43,8 @@
     max-height: 100vh;
     overflow-y: auto;
     align-self: start;
+    margin: 0;
+    padding: 0;
   }
   
   .pane.main {
@@ -59,6 +61,8 @@
     max-height: 100vh;
     overflow-y: auto;
     align-self: start;
+    margin: 0;
+    padding: 0;
   }
 }