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,11 +157,13 @@ 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}
+            <Link to={postLink}>
+              <div
+                className={styles.mediaPaddingWrapper}
+                ref={refs.setReference}
                 onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
                 onMouseLeave={() => {
                   setShowPortal(false);
@@ -171,7 +173,6 @@ const CatalogPost = ({ post }: { post: Comment }) => {
                   }
                 }}
               >
-              <div className={styles.mediaPaddingWrapper}>
                 {threadIcons}
                 <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
               </div>