diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx index f796bd96..4b86290c 100644 --- a/src/components/ThreePaneLayout.tsx +++ b/src/components/ThreePaneLayout.tsx @@ -106,10 +106,11 @@ const ThreePaneLayout: React.FC = (props) => { const mainPaneRef = useRef(null) // Detect scroll direction to hide/show mobile buttons - // Now using window scroll (document scroll) instead of pane scroll + // Only hide on scroll down when viewing article content + const isViewingArticle = !!(props.selectedUrl) const scrollDirection = useScrollDirection({ threshold: 10, - enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed + enabled: isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && isViewingArticle }) const showMobileButtons = scrollDirection !== 'down' @@ -229,8 +230,8 @@ const ThreePaneLayout: React.FC = (props) => { return ( <> - {/* Mobile bookmark button - only show when viewing article or explore (not on settings/me/profile/support) */} - {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showMe && !props.showProfile && !props.showSupport && ( + {/* Mobile bookmark button - always show except on settings page */} + {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && ( )} - {/* Mobile highlights button - only show when viewing article or explore (not on settings/me/profile/support) */} - {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && !props.showMe && !props.showProfile && !props.showSupport && ( + {/* Mobile highlights button - only show when viewing article content */} + {isMobile && !props.isSidebarOpen && props.isHighlightsCollapsed && !props.showSettings && isViewingArticle && (