add media to replies on mobile, adjust padding on all media

src/components/media/media.module.css

@@ -71,14 +71,14 @@
   padding: 5px 0 10px 0;
 }
 
-@media (min-width: 640px) {
-  .media img, .media iframe, .media video, .media audio {
-    margin: 3px 20px 5px 0;
-  }
+.thumbnailReplyDesktop {
+  margin: 3px 20px 5px 20px;
 }
 
-@media (max-width: 640px) {
-  .media img, .media iframe, .media video, .media audio {
-    padding: 3px 0 5px 0;
-  }
+.thumbnailMobile {
+  margin: 8px 10px 5px 5px;
+}
+
+.mediaMobile img, .mediaMobile video, .mediaMobile iframe, .mediaMobile audio {
+  padding: 3px 0 5px 0;
 }

src/components/media/media.tsx

@@ -19,7 +19,7 @@ interface MediaProps {
 interface ThumbnailProps {
   style: React.CSSProperties;
   children: React.ReactNode;
-  type?: string;
+  thumbnailSmallPadding?: string;
 }
 
 const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
@@ -28,8 +28,8 @@ const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
   </span>
 );
 
-const ThumbnailSmall = ({ style, children, type }: ThumbnailProps) => (
-  <span className={styles.thumbnailSmall} style={style}>
+const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailProps) => (
+  <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={style}>
     {children}
   </span>
 );
@@ -61,19 +61,22 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth
     mediaComponent = <img src={gifFrameUrl} alt='' />;
   }
 
-  const thumbnailStyle = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
+  const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
+  const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   return isMobile || isReply ? (
-    <ThumbnailSmall style={thumbnailStyle} type={commentMediaInfo?.type}>
+    <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
       {mediaComponent}
     </ThumbnailSmall>
   ) : (
-    <ThumbnailBig style={thumbnailStyle}>{mediaComponent}</ThumbnailBig>
+    <ThumbnailBig style={thumbnailDimensions}>{mediaComponent}</ThumbnailBig>
   );
 };
 
 const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
+  const mediaClass = isMobile ? styles.mediaMobile : styles.mediaDesktop;
+
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
@@ -88,7 +91,7 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
         />
         {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
       </span>
-      <span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
+      <span className={`${showThumbnail ? styles.hide : styles.show} ${mediaClass}`}>
         {commentMediaInfo?.type === 'iframe' ? (
           <Embed url={commentMediaInfo.url} />
         ) : commentMediaInfo?.type === 'gif' ? (

src/components/post/post.module.css

@@ -280,10 +280,17 @@
   padding-top: 7px;
 }
 
-.replyMobile .reply {
+.replyMobile .replyContainer {
   background-color: var(--post-mobile-background-color);
 }
 
+/* clearfix to the container of the floatied elements to contain them */
+.replyContainer::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .replyMobile .postInfo {
   padding: 5px;
   border-bottom: var(--post-mobile-info-border-bottom);

src/components/post/post.tsx

@@ -16,6 +16,10 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
 
+  const commentMediaInfo = getCommentMediaInfoMemoized(reply);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const [showThumbnail, setShowThumbnail] = useState(true);
+
   return (
     index < 5 && (
       <div className={styles.replyDesktop}>
@@ -47,6 +51,27 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
             </span>
             <span className={styles.postMenuBtn}>▶</span>
           </div>
+          {link && (
+            <div className={styles.file}>
+              <div className={styles.fileText}>
+                {t('link')}:{' '}
+                <a href={link} target='_blank' rel='noopener noreferrer'>
+                  {link.length > 30 ? link.slice(0, 30) + '...' : link}
+                </a>
+              </div>
+              {hasThumbnail && (
+                <Media
+                  commentMediaInfo={commentMediaInfo}
+                  isMobile={false}
+                  isReply={true}
+                  linkHeight={linkHeight}
+                  linkWidth={linkWidth}
+                  showThumbnail={showThumbnail}
+                  setShowThumbnail={setShowThumbnail}
+                />
+              )}
+            </div>
+          )}
           {content && (
             <blockquote className={styles.postMessage}>
               <Markdown content={content} />
@@ -67,11 +92,10 @@ const PostDesktop = ({ post }: Comment) => {
 
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const [showThumbnail, setShowThumbnail] = useState(true);
 
   const replies = useReplies(post);
 
-  const [showThumbnail, setShowThumbnail] = useState(true);
-
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
@@ -173,24 +197,41 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
 
+  const commentMediaInfo = getCommentMediaInfoMemoized(reply);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const [showThumbnail, setShowThumbnail] = useState(true);
+
   return (
     index < 5 && (
       <div className={styles.replyMobile}>
         <div className={styles.reply}>
-          <div className={styles.postInfo}>
-            <span className={styles.postMenuBtn}>...</span>
-            <span className={styles.nameBlock}>
-              <span className={styles.name}>{displayName || 'Anonymous'} </span>
-              <span className={styles.address}>(u/{shortAddress})</span>
-            </span>
-            <span className={styles.dateTimePostNum}>
-              {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
-              <span className={styles.replyToPost}>{shortCid}</span>
-            </span>
+          <div className={styles.replyContainer}>
+            <div className={styles.postInfo}>
+              <span className={styles.postMenuBtn}>...</span>
+              <span className={styles.nameBlock}>
+                <span className={styles.name}>{displayName || 'Anonymous'} </span>
+                <span className={styles.address}>(u/{shortAddress})</span>
+              </span>
+              <span className={styles.dateTimePostNum}>
+                {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
+                <span className={styles.replyToPost}>{shortCid}</span>
+              </span>
+            </div>
+            {hasThumbnail && (
+              <Media
+                commentMediaInfo={commentMediaInfo}
+                isMobile={true}
+                isReply={false}
+                linkHeight={linkHeight}
+                linkWidth={linkWidth}
+                showThumbnail={showThumbnail}
+                setShowThumbnail={setShowThumbnail}
+              />
+            )}
+            <blockquote className={styles.postMessage}>
+              <Markdown content={content} />
+            </blockquote>
           </div>
-          <blockquote className={styles.postMessage}>
-            <Markdown content={content} />
-          </blockquote>
         </div>
       </div>
     )
@@ -206,11 +247,10 @@ const PostMobile = ({ post }: Comment) => {
 
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const [showThumbnail, setShowThumbnail] = useState(true);
 
   const replies = useReplies(post);
 
-  const [showThumbnail, setShowThumbnail] = useState(true);
-
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -239,17 +279,15 @@ const PostMobile = ({ post }: Comment) => {
               </span>
             </div>
             {hasThumbnail && (
-              <>
-                <Media
-                  commentMediaInfo={commentMediaInfo}
-                  isMobile={true}
-                  isReply={false}
-                  linkHeight={linkHeight}
-                  linkWidth={linkWidth}
-                  showThumbnail={showThumbnail}
-                  setShowThumbnail={setShowThumbnail}
-                />
-              </>
+              <Media
+                commentMediaInfo={commentMediaInfo}
+                isMobile={true}
+                isReply={false}
+                linkHeight={linkHeight}
+                linkWidth={linkWidth}
+                showThumbnail={showThumbnail}
+                setShowThumbnail={setShowThumbnail}
+              />
             )}
             {content && (
               <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>