From 974a10442e5f88f4524d6c44947d262a773ce0d0 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 7 Mar 2025 19:42:30 +0100
Subject: [PATCH] update comment media

---
 src/components/comment-media/comment-media.module.css | 4 ++++
 src/components/comment-media/comment-media.tsx        | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index 3d5542aa..fc893763 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -65,6 +65,10 @@
   float: left;
 }
 
+.removeFloat {
+  float: none !important;
+}
+
 .thumbnail video {
   cursor: pointer;
 }
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 05ddb3b8..16086993 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -155,14 +155,17 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
   if (spoiler && !isImageExpanded) {
     const spoilerDimensions = { '--width': '150px', '--height': '150px' } as React.CSSProperties;
     return (
-      <span className={`${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail}`} style={spoilerDimensions}>
+      <span
+        className={`${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailBig} ${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}
+        style={spoilerDimensions}
+      >
         <img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => setIsImageExpanded(true)} />
       </span>
     );
   }
 
   return isMobile ? (
-    <span className={styles.thumbnail}>
+    <span className={`${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}>
       <span
         className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.subplebbitAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
         style={isImageExpanded ? {} : thumbnailDimensions}