From d50bcd700e5e15ee9c43c519ec59397b174a7576 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 21:51:24 +0200
Subject: [PATCH] fix(ui): make highlight button fixed to viewport

---
 src/components/HighlightButton.tsx | 59 +++++++++++--------------
 src/components/ThreePaneLayout.tsx | 70 +++++++++++++++---------------
 src/styles/layout/app.css          |  2 -
 3 files changed, 59 insertions(+), 72 deletions(-)

diff --git a/src/components/HighlightButton.tsx b/src/components/HighlightButton.tsx
index 3e9d267b..b86448a2 100644
--- a/src/components/HighlightButton.tsx
+++ b/src/components/HighlightButton.tsx
@@ -41,45 +41,36 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
     }))
 
     return (
-      <div
+      <button
+        className="highlight-fab"
         style={{
-          position: 'sticky',
+          position: 'fixed',
           bottom: '32px',
-          zIndex: 10,
-          height: 0,
+          right: '32px',
+          zIndex: 1000,
+          width: '56px',
+          height: '56px',
+          borderRadius: '50%',
+          backgroundColor: highlightColor,
+          color: '#000',
+          border: 'none',
+          boxShadow: hasSelection ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
+          cursor: hasSelection ? 'pointer' : 'default',
           display: 'flex',
-          justifyContent: 'flex-end',
-          pointerEvents: 'none',
-          marginRight: '32px'
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.3s ease',
+          opacity: hasSelection ? 1 : 0.4,
+          transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
+          pointerEvents: hasSelection ? 'auto' : 'none',
+          userSelect: 'none'
         }}
+        onClick={handleClick}
+        aria-label="Create highlight from selection"
+        title={hasSelection ? 'Create highlight' : ''}
       >
-        <button
-          className="highlight-fab"
-          style={{
-            width: '56px',
-            height: '56px',
-            borderRadius: '50%',
-            backgroundColor: highlightColor,
-            color: '#000',
-            border: 'none',
-            boxShadow: hasSelection ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
-            cursor: hasSelection ? 'pointer' : 'default',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transition: 'all 0.3s ease',
-            opacity: hasSelection ? 1 : 0.4,
-            transform: hasSelection ? 'scale(1)' : 'scale(0.8)',
-            pointerEvents: hasSelection ? 'auto' : 'none',
-            userSelect: 'none'
-          }}
-          onClick={handleClick}
-          aria-label="Create highlight from selection"
-          title={hasSelection ? 'Create highlight' : ''}
-        >
-          <FontAwesomeIcon icon={faHighlighter} size="lg" />
-        </button>
-      </div>
+        <FontAwesomeIcon icon={faHighlighter} size="lg" />
+      </button>
     )
   }
 )
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 255982c9..b3912f90 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -359,42 +359,33 @@ 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}
-              />
-              {props.hasActiveAccount && (
-                <HighlightButton 
-                  ref={props.highlightButtonRef} 
-                  onHighlight={props.onCreateHighlight}
-                  highlightColor={props.settings.highlightColorMine || '#ffff00'}
-                />
-              )}
-            </>
+            <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}
+            />
           )}
         </div>
         <div 
@@ -423,6 +414,13 @@ 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 68412024..a1dbc9b3 100644
--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -55,7 +55,6 @@
     min-height: 100vh;
     overflow: visible !important;
     height: auto !important;
-    position: relative;
   }
   
   .pane.highlights {
@@ -138,7 +137,6 @@
     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; }