fix: remove sidebar margins and constrain reading progress bar to content pane

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}
         />
       )}
       

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 ${

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>

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;
   }
 }