fix: position floating catalog post preview relative to thumbnail dimensions

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
+            <Link to={postLink}>
-              to={postLink}
+              <div
-              onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
+                className={styles.mediaPaddingWrapper}
-              onMouseLeave={() => {
+                ref={refs.setReference}
-                setShowPortal(false);
+                onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
-                if (timeoutRef.current) {
+                onMouseLeave={() => {
-                  clearTimeout(timeoutRef.current);
+                  setShowPortal(false);
-                  timeoutRef.current = null;
+                  if (timeoutRef.current) {
-                }
+                    clearTimeout(timeoutRef.current);
-              }}
+                    timeoutRef.current = null;
-            >
+                  }
-              <div className={styles.mediaPaddingWrapper}>
+                }}
+              >
                 {threadIcons}
                 <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
               </div>