fix(ui): position highlight FAB button relative to article pane, not viewport

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,

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