From 820ab1d90247d603e105d71f1feb57f3913a1d5d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 21:48:41 +0200
Subject: [PATCH] fix(ui): make highlight button sticky and always visible

- Wrap button in sticky positioned container with height: 0
- Button now floats and stays visible while scrolling
- Remains within reader pane boundaries on desktop
- Uses flexbox to align button to the right side
---
 src/components/HighlightButton.tsx | 57 +++++++++++++++++-------------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/HighlightButton.tsx b/src/components/HighlightButton.tsx
index 0af91c42..3e9d267b 100644
--- a/src/components/HighlightButton.tsx
+++ b/src/components/HighlightButton.tsx
@@ -41,36 +41,45 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
     }))
 
     return (
-      <button
-        className="highlight-fab"
+      <div
         style={{
-          position: 'absolute',
+          position: 'sticky',
           bottom: '32px',
-          right: '32px',
           zIndex: 10,
-          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',
+          height: 0,
           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'
+          justifyContent: 'flex-end',
+          pointerEvents: 'none',
+          marginRight: '32px'
         }}
-        onClick={handleClick}
-        aria-label="Create highlight from selection"
-        title={hasSelection ? 'Create highlight' : ''}
       >
-        <FontAwesomeIcon icon={faHighlighter} size="lg" />
-      </button>
+        <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>
     )
   }
 )