External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(reply-quote-preview): keep floating OP previews at desktop width

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-04-16 15:20:49 +07:00
parent b288c62c06
commit f6ce2ba018
5 changed files with 86 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reply-quote-preview/reply-quote-preview.tsx
+7 -4
View File
@@ -24,6 +24,9 @@ interface ReplyQuotePreviewProps {
showTrailingBreak?: boolean;
}
const getQuotePreviewClassName = (previewPost?: Comment) =>
!previewPost?.parentCid ? `${styles.replyQuotePreview} ${styles.replyQuotePreviewOp}` : styles.replyQuotePreview;
const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
const isOpElement = (element: HTMLElement) => element.getAttribute('data-post-cid') === cid;
@@ -209,7 +212,7 @@ const DesktopQuotePreview = ({
{hoveredCid === normalizedBacklinkReply?.cid &&
outOfViewCid === normalizedBacklinkReply?.cid &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedBacklinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedBacklinkReply} showReplies={false} />
</div>,
document.body,
@@ -265,7 +268,7 @@ const DesktopQuotePreview = ({
{showTrailingBreak && <br />}
{shouldShowQuotelinkPreview &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedQuotelinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedQuotelinkReply} showReplies={false} />
</div>,
document.body,
@@ -373,7 +376,7 @@ const MobileQuotePreview = ({
{hoveredCid === normalizedBacklinkReply?.cid &&
outOfViewCid === normalizedBacklinkReply?.cid &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedBacklinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedBacklinkReply} showReplies={false} />
</div>,
document.body,
@@ -427,7 +430,7 @@ const MobileQuotePreview = ({
{showTrailingBreak && <br />}
{shouldShowQuotelinkPreview &&
createPortal(
<div className={styles.replyQuotePreview} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<div className={getQuotePreviewClassName(normalizedQuotelinkReply)} data-thread-scroll-preview='true' ref={refs.setFloating} style={floatingStyles}>
<Post post={normalizedQuotelinkReply} showReplies={false} />
</div>,
document.body,