From f5e9e5bf61347822a410a58ad6ac03438e04079b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 21:47:28 +0200
Subject: [PATCH] fix(ui): position highlight button inside reader pane

- Move HighlightButton from fixed viewport positioning to absolute positioning within main pane
- Add position: relative to .pane.main for both desktop and mobile layouts
- Button now stays within the article/reader view instead of floating outside on desktop
- Maintains proper z-index and responsive behavior
---
 src/components/HighlightButton.tsx |  4 +-
 src/components/ThreePaneLayout.tsx | 70 +++++++++++++++---------------
 src/styles/layout/app.css          |  2 +
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/components/HighlightButton.tsx b/src/components/HighlightButton.tsx
index b86448a2..0af91c42 100644
--- a/src/components/HighlightButton.tsx
+++ b/src/components/HighlightButton.tsx
@@ -44,10 +44,10 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
       <button
         className="highlight-fab"
         style={{
-          position: 'fixed',
+          position: 'absolute',
           bottom: '32px',
           right: '32px',
-          zIndex: 1000,
+          zIndex: 10,
           width: '56px',
           height: '56px',
           borderRadius: '50%',
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index b3912f90..255982c9 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -359,33 +359,42 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               {props.support}
             </>
           ) : (
-            <ContentPanel 
-              loading={props.readerLoading}
-              title={props.readerContent?.title}
-              html={props.readerContent?.html}
-              markdown={props.readerContent?.markdown}
-              image={props.readerContent?.image}
-              summary={props.readerContent?.summary}
-              published={props.readerContent?.published}
-              selectedUrl={props.selectedUrl}
-              highlights={props.classifiedHighlights}
-              showHighlights={props.showHighlights}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
-              onHighlightClick={props.onHighlightClick}
-              selectedHighlightId={props.selectedHighlightId}
-              highlightVisibility={props.highlightVisibility}
-              onTextSelection={props.onTextSelection}
-              onClearSelection={props.onClearSelection}
-              currentUserPubkey={props.currentUserPubkey}
-              followedPubkeys={props.followedPubkeys}
-              settings={props.settings}
-              relayPool={props.relayPool}
-              activeAccount={props.activeAccount}
-              currentArticle={props.currentArticle}
-              isSidebarCollapsed={props.isCollapsed}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
-            />
+            <>
+              <ContentPanel 
+                loading={props.readerLoading}
+                title={props.readerContent?.title}
+                html={props.readerContent?.html}
+                markdown={props.readerContent?.markdown}
+                image={props.readerContent?.image}
+                summary={props.readerContent?.summary}
+                published={props.readerContent?.published}
+                selectedUrl={props.selectedUrl}
+                highlights={props.classifiedHighlights}
+                showHighlights={props.showHighlights}
+                highlightStyle={props.settings.highlightStyle || 'marker'}
+                highlightColor={props.settings.highlightColor || '#ffff00'}
+                onHighlightClick={props.onHighlightClick}
+                selectedHighlightId={props.selectedHighlightId}
+                highlightVisibility={props.highlightVisibility}
+                onTextSelection={props.onTextSelection}
+                onClearSelection={props.onClearSelection}
+                currentUserPubkey={props.currentUserPubkey}
+                followedPubkeys={props.followedPubkeys}
+                settings={props.settings}
+                relayPool={props.relayPool}
+                activeAccount={props.activeAccount}
+                currentArticle={props.currentArticle}
+                isSidebarCollapsed={props.isCollapsed}
+                isHighlightsCollapsed={props.isHighlightsCollapsed}
+              />
+              {props.hasActiveAccount && (
+                <HighlightButton 
+                  ref={props.highlightButtonRef} 
+                  onHighlight={props.onCreateHighlight}
+                  highlightColor={props.settings.highlightColorMine || '#ffff00'}
+                />
+              )}
+            </>
           )}
         </div>
         <div 
@@ -414,13 +423,6 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           />
         </div>
       </div>
-      {props.hasActiveAccount && (
-        <HighlightButton 
-          ref={props.highlightButtonRef} 
-          onHighlight={props.onCreateHighlight}
-          highlightColor={props.settings.highlightColorMine || '#ffff00'}
-        />
-      )}
       <RelayStatusIndicator 
         relayPool={props.relayPool}
         showOnMobile={showBookmarkButton}
diff --git a/src/styles/layout/app.css b/src/styles/layout/app.css
index a1dbc9b3..68412024 100644
--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -55,6 +55,7 @@
     min-height: 100vh;
     overflow: visible !important;
     height: auto !important;
+    position: relative;
   }
   
   .pane.highlights {
@@ -137,6 +138,7 @@
     max-width: 100%; 
     width: 100%;
     transition: opacity 0.2s ease;
+    position: relative;
   }
   /* Hide main content when sidepanes are open on mobile */
   .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }