From ce99600aa966f07c2e2ff2f673e74692d29da4cd Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 23:11:52 +0100
Subject: [PATCH] fix: move FAB outside reader container for proper
 viewport-fixed positioning

The CSS contain property on .reader was creating a new containing block that broke position:fixed. Moving FAB outside allows it to float properly.
---
 dist/index.html                 |  2 +-
 src/components/ContentPanel.tsx | 92 +++++++++++++++++----------------
 2 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 2b528cc0..7213cbf8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Boris - Nostr Bookmarks</title>
-    <script type="module" crossorigin src="/assets/index-D6D6QiSt.js"></script>
+    <script type="module" crossorigin src="/assets/index-CpMOb6rf.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Bj-Uhit8.css">
   </head>
   <body>
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index b0353728..811158b7 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -252,56 +252,58 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   const highlightRgb = hexToRgb(highlightColor)
 
   return (
-    <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
-      {/* Hidden markdown preview to convert markdown to HTML */}
-      {markdown && (
-        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {markdown}
-          </ReactMarkdown>
-        </div>
-      )}
-      
-      <ReaderHeader 
-        title={title}
-        image={image}
-        readingTimeText={readingStats ? readingStats.text : null}
-        hasHighlights={hasHighlights}
-        highlightCount={relevantHighlights.length}
-      />
-      {markdown || html ? (
-        markdown ? (
-          finalHtml ? (
-            <div 
-              ref={contentRef} 
-              className="reader-markdown" 
-              dangerouslySetInnerHTML={{ __html: finalHtml }}
-              onMouseUp={handleMouseUp}
-            />
+    <>
+      <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
+        {/* Hidden markdown preview to convert markdown to HTML */}
+        {markdown && (
+          <div ref={markdownPreviewRef} style={{ display: 'none' }}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {markdown}
+            </ReactMarkdown>
+          </div>
+        )}
+        
+        <ReaderHeader 
+          title={title}
+          image={image}
+          readingTimeText={readingStats ? readingStats.text : null}
+          hasHighlights={hasHighlights}
+          highlightCount={relevantHighlights.length}
+        />
+        {markdown || html ? (
+          markdown ? (
+            finalHtml ? (
+              <div 
+                ref={contentRef} 
+                className="reader-markdown" 
+                dangerouslySetInnerHTML={{ __html: finalHtml }}
+                onMouseUp={handleMouseUp}
+              />
+            ) : (
+              <div 
+                ref={contentRef} 
+                className="reader-markdown"
+                onMouseUp={handleMouseUp}
+              >
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {markdown}
+                </ReactMarkdown>
+              </div>
+            )
           ) : (
             <div 
               ref={contentRef} 
-              className="reader-markdown"
+              className="reader-html" 
+              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
               onMouseUp={handleMouseUp}
-            >
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {markdown}
-              </ReactMarkdown>
-            </div>
+            />
           )
         ) : (
-          <div 
-            ref={contentRef} 
-            className="reader-html" 
-            dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-            onMouseUp={handleMouseUp}
-          />
-        )
-      ) : (
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
-        </div>
-      )}
+          <div className="reader empty">
+            <p>No readable content found for this URL.</p>
+          </div>
+        )}
+      </div>
       
       {activeAccount && relayPool && (
         <HighlightButton 
@@ -310,7 +312,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
           highlightColor={highlightColor}
         />
       )}
-    </div>
+    </>
   )
 }
 
