diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index ccbc0878..f312d14b 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -16,6 +16,7 @@ import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
 import Markdown from '../markdown';
 import _ from 'lodash';
+import useWindowWidth from '../../hooks/use-window-width';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -133,9 +134,10 @@ const CatalogPost = ({ post }: { post: Comment }) => {
   const [hoveredCid, setHoveredCid] = useState<string | null>(null);
   const [showPortal, setShowPortal] = useState<boolean>(false);
   const placementRef = useRef<Placement>('right-start');
-  const availableWidthRef = useRef<number>(0);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  const windowWidth = useWindowWidth();
+
   const { refs, floatingStyles, update } = useFloating({
     open: showPortal,
     placement: placementRef.current,
@@ -143,12 +145,26 @@ const CatalogPost = ({ post }: { post: Comment }) => {
       shift({ padding: 10 }),
       offset({ mainAxis: 5 }),
       size({
-        apply({ availableWidth, elements }) {
-          availableWidthRef.current = availableWidth;
-          if (availableWidth >= 250) {
-            elements.floating.style.maxWidth = `${availableWidth - 12}px`;
-          } else if (placementRef.current === 'right-start') {
-            placementRef.current = 'left-start';
+        apply({ elements }) {
+          const referenceElement = refs.reference.current;
+          if (referenceElement) {
+            const availableWidthToTheRight = windowWidth - (referenceElement.getBoundingClientRect().left + referenceElement.getBoundingClientRect().width);
+            const availableWidthToTheLeft = referenceElement.getBoundingClientRect().left;
+            const minWidth = windowWidth * 0.25;
+
+            if (availableWidthToTheRight >= minWidth) {
+              placementRef.current = 'right-start';
+              elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
+            } else if (availableWidthToTheLeft >= minWidth) {
+              placementRef.current = 'left-start';
+              elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
+            } else if (availableWidthToTheRight > availableWidthToTheLeft) {
+              placementRef.current = 'right-start';
+              elements.floating.style.maxWidth = `${availableWidthToTheRight - 40}px`;
+            } else {
+              placementRef.current = 'left-start';
+              elements.floating.style.maxWidth = `${availableWidthToTheLeft - 25}px`;
+            }
           }
         },
       }),
@@ -157,21 +173,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
   });
 
   useEffect(() => {
-    const handleResize = () => {
-      const availableWidth = availableWidthRef.current;
-      if (availableWidth >= 250) {
-        placementRef.current = 'right-start';
-      } else {
-        placementRef.current = 'left-start';
-      }
-      update();
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [update]);
+    update();
+  }, [update, windowWidth]);
 
   const lastReply = useComment({ commentCid: lastChildCid });
 
@@ -248,7 +251,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
           {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
         </div>
       </div>
-      {hoveredCid === cid &&
+      {(hoveredCid === cid || isDescription) &&
         showPortal &&
         createPortal(
           <div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}>