aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-27 11:34:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: move FAB outside reader container for proper viewport-fixed positioning

Browse Source 
The CSS contain property on .reader was creating a new containing block that broke position:fixed. Moving FAB outside allows it to float properly.
This commit is contained in:
Gigi
2025-10-05 23:11:52 +01:00
parent 77bcc481b5
commit ce99600aa9
2 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/ContentPanel.tsx
View File

@@ -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>
</>
)
}