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 {