From 2a5ecf90ee7372cc8aeb7d59ee14b29b3e8bb749 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 8 Jun 2024 12:07:36 +0200
Subject: [PATCH] fix: position floating catalog post preview relative to
 thumbnail dimensions

---
 src/components/catalog-row/catalog-row.tsx | 29 +++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 5a90bbd7..4f2d2544 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -112,7 +112,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
     placement: placementRef.current,
     middleware: [
       shift({ padding: 10 }),
-      offset({ mainAxis: -7 }),
+      offset({ mainAxis: 5 }),
       size({
         apply({ availableWidth, elements }) {
           availableWidthRef.current = availableWidth;
@@ -157,21 +157,22 @@ const CatalogPost = ({ post }: { post: Comment }) => {
 
   return (
     <>
-      <div className={styles.post} ref={refs.setReference}>
+      <div className={styles.post}>
         <div onMouseOver={() => setHoveredCid(cid)} onMouseLeave={() => setHoveredCid(null)}>
           {hasThumbnail ? (
-            <Link
-              to={postLink}
-              onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
-              onMouseLeave={() => {
-                setShowPortal(false);
-                if (timeoutRef.current) {
-                  clearTimeout(timeoutRef.current);
-                  timeoutRef.current = null;
-                }
-              }}
-            >
-              <div className={styles.mediaPaddingWrapper}>
+            <Link to={postLink}>
+              <div
+                className={styles.mediaPaddingWrapper}
+                ref={refs.setReference}
+                onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
+                onMouseLeave={() => {
+                  setShowPortal(false);
+                  if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = null;
+                  }
+                }}
+              >
                 {threadIcons}
                 <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
               </div>