From 8a21b46ebd5c1ff1dbc1b355a53759d7fd1e6585 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 21:23:21 +0100
Subject: [PATCH] fix(ui): position highlight FAB button relative to article
 pane, not viewport

---
 src/components/HighlightButton.tsx |  2 +-
 src/components/ThreePaneLayout.tsx | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/HighlightButton.tsx b/src/components/HighlightButton.tsx
index b86448a2..2694d659 100644
--- a/src/components/HighlightButton.tsx
+++ b/src/components/HighlightButton.tsx
@@ -44,7 +44,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
       <button
         className="highlight-fab"
         style={{
-          position: 'fixed',
+          position: 'absolute',
           bottom: '32px',
           right: '32px',
           zIndex: 1000,
diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index 6d25fe04..1158b2c4 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -101,7 +101,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             settings={props.settings}
           />
         </div>
-        <div className="pane main">
+        <div className="pane main" style={{ position: 'relative' }}>
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
@@ -138,6 +138,13 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               settings={props.settings}
             />
           )}
+          {props.hasActiveAccount && (
+            <HighlightButton 
+              ref={props.highlightButtonRef} 
+              onHighlight={props.onCreateHighlight}
+              highlightColor={props.settings.highlightColor || '#ffff00'}
+            />
+          )}
         </div>
         <div className="pane highlights">
           <HighlightsPanel
@@ -160,13 +167,6 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           />
         </div>
       </div>
-      {props.hasActiveAccount && (
-        <HighlightButton 
-          ref={props.highlightButtonRef} 
-          onHighlight={props.onCreateHighlight}
-          highlightColor={props.settings.highlightColor || '#ffff00'}
-        />
-      )}
       <RelayStatusIndicator relayPool={props.relayPool} />
       {props.toastMessage && (
         <Toast