fix(ui): reduce font size of highlight metadata for cleaner look

src/components/HighlightButton.tsx

@@ -44,7 +44,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
       <button
         className="highlight-fab"
         style={{
-          position: 'absolute',
+          position: 'fixed',
           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" style={{ position: 'relative' }}>
+        <div className="pane main">
           {props.showSettings ? (
             <Settings 
               settings={props.settings}
@@ -138,13 +138,6 @@ 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
@@ -167,6 +160,13 @@ 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

src/index.css

@@ -1642,7 +1642,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   color: #888;
   flex-wrap: nowrap;
   min-height: 20px;