From 33cee9c0c26498d2f4cd9c41d5fe1cca1aec6fa1 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 10 Oct 2025 17:11:26 +0100
Subject: [PATCH] feat: hide main content when sidepanes open on mobile for
 single-pane view

---
 src/components/ThreePaneLayout.tsx | 6 +++---
 src/index.css                      | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index a88959bf..cca3bbcf 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -201,7 +201,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
 
   return (
     <>
-      {/* Mobile bookmark button */}
+      {/* Mobile bookmark button - only show when viewing article */}
       {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
         <button
           className="mobile-hamburger-btn"
@@ -213,7 +213,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         </button>
       )}
 
-      {/* Mobile highlights button */}
+      {/* Mobile highlights button - only show when viewing article */}
       {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && (
         <button
           className="mobile-highlights-btn"
@@ -259,7 +259,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             isMobile={isMobile}
           />
         </div>
-        <div className="pane main">
+        <div className={`pane main ${isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed) ? 'mobile-hidden' : ''}`}>
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
diff --git a/src/index.css b/src/index.css
index fbdf36f7..46826371 100644
--- a/src/index.css
+++ b/src/index.css
@@ -619,6 +619,13 @@ body.mobile-sidebar-open {
     grid-row: 1;
     padding: 0.5rem;
     max-width: 100%;
+    transition: opacity 0.2s ease;
+  }
+  
+  /* Hide main content when sidepanes are open on mobile */
+  .three-pane .pane.main.mobile-hidden {
+    opacity: 0;
+    pointer-events: none;
   }
   
   .pane.highlights {