From 57c3c4e5339445c1ff47d616d53e7cd0f3091201 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 30 Mar 2024 18:10:19 +0100
Subject: [PATCH 01/13] add replies on desktop

---
 src/components/post/post.module.css | 51 +++++++++++++++++----
 src/components/post/post.tsx        | 69 +++++++++++++++++++++++------
 src/themes.css                      |  3 ++
 3 files changed, 101 insertions(+), 22 deletions(-)

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 371ec368..f7c16f82 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -58,27 +58,31 @@
   width: 100%;
 }
 
+.postDesktop .checkbox, .replyDesktop .checkbox {
+  padding: 3px 7px 3px 4px;
+}
+
 .postDesktop .subject {
   color: var(--post-subject-text-color);
   font-weight: var(--post-subject-font-weight);
 }
 
-.postDesktop .name {
+.postDesktop .name, .replyDesktop .name {
   color: var(--post-name-text-color);
   font-weight: var(--post-name-font-weight);
 }
 
-.postDesktop .postNumLink a, .postDesktop .postNumLink span {
+.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
   color: unset;
   text-decoration: unset;
 }
 
-.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover {
+.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
   cursor: pointer;
   color: var(--button-desktop-text-color-hover);
 }
 
-.postDesktop .stickyIconWrapper {
+.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
   padding-left: 5px;
 }
 
@@ -86,7 +90,7 @@
   padding-left: 3px;
 }
 
-.postDesktop .stickyIconWrapper img, .postDesktop .closedIconWrapper img {
+.postDesktop .stickyIconWrapper img, .postDesktop .closedIconWrapper img, .replyDesktop .stickyIconWrapper img, .replyDesktop .closedIconWrapper img {
   width: 16px;
   height: 16px;
   border: none;
@@ -108,17 +112,17 @@
   color: var(--button-desktop-text-color-hover);
 }
 
-.postDesktop .postMenuBtn {
+.postDesktop .postMenuBtn, .replyDesktop .postMenuBtn {
   padding-left: 5px;
   color: var(--post-menu-button-color);
 }
 
-.postDesktop .postMenuBtn:hover {
+.postDesktop .postMenuBtn:hover, .replyDesktop .postMenuBtn:hover {
   cursor: pointer;
   color: var(--post-menu-button-color-hover);
 }
 
-.postDesktop .postMessage {
+.postDesktop .postMessage, .replyDesktop .postMessage {
   padding: 1em 40px;
 }
 
@@ -249,14 +253,45 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
+.replyDesktop {
+  padding-bottom: 4px;
+}
+
+.replyDesktop .sideArrows {
+  color: var(--side-arrows-color);
+  float: left;
+  padding: 0 2px;
+}
+
+.replyDesktop .reply {
+  background-color: #f0e0d6;
+  border: 1px solid #d9bfb7;
+  border-left: none;
+  border-top: none;
+  display: table;
+  padding: 2px;
+}
+
+.replyDesktop .postInfo {
+  padding: 3px 3px 0 0;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
   }
+
+  .replyDesktop {
+    display: none;
+  }
 }
 
 @media (min-width: 641px) {
   .postMobile {
     display: none;
   }
+
+  .replyMobile {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 350f6d17..f32b56b8 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -10,13 +10,50 @@ import { Thumbnail } from '../media';
 
 import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
 
-const ReplyDesktop = ({ reply }: Comment) => {
-  const { content, link, linkHeight, linkWidth, shortCid, subplebbitAddress, timestamp } = reply || {};
+const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
+  const { t } = useTranslation();
+  const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
+  const { displayName, shortAddress } = author || {};
+
   return (
-    <div className={styles.replyDesktop}>
-      <div className={styles.sideArrows}>{'>>'}</div>
-      {content}
-    </div>
+    index < 5 && (
+      <div className={styles.replyDesktop}>
+        <div className={styles.sideArrows}>{'>>'}</div>
+        <div className={styles.reply}>
+          <div className={styles.postInfo}>
+            <span className={styles.checkbox}>
+              <input type='checkbox' />
+            </span>
+            <span className={styles.nameBlock}>
+              <span className={styles.name}>{displayName || 'Anonymous'} </span>
+              <span className={styles.userAddress}>(u/{shortAddress}) </span>
+            </span>
+            <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
+            <span className={styles.postNum}>
+              <span className={styles.postNumLink}>
+                <Link to={`/p/${subplebbitAddress}/c/${reply.cid}`} className={styles.linkToPost} title='Link to post'>
+                  c/
+                </Link>
+                <span className={styles.replyToPost} title='Reply to post'>
+                  {shortCid}
+                </span>
+              </span>
+              {pinned && (
+                <span className={styles.stickyIconWrapper}>
+                  <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
+                </span>
+              )}
+            </span>
+            <span className={styles.postMenuBtn}>▶</span>
+          </div>
+          {content && (
+            <blockquote className={styles.postMessage}>
+              <Markdown content={content} />
+            </blockquote>
+          )}
+        </div>
+      </div>
+    )
   );
 };
 
@@ -30,6 +67,8 @@ const PostDesktop = ({ post }: Comment) => {
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
+  const replies = useReplies(post);
+
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
@@ -55,7 +94,10 @@ const PostDesktop = ({ post }: Comment) => {
         </div>
       )}
       <div className={styles.postInfo}>
-        {title && <span className={styles.subject}>{displayTitle}</span>}{' '}
+        <span className={styles.checkbox}>
+          <input type='checkbox' />
+        </span>
+        {title && <span className={styles.subject}>{displayTitle} </span>}
         <span className={styles.nameBlock}>
           <span className={styles.name}>{displayName || 'Anonymous'} </span>
           <span className={styles.userAddress}>(u/{shortAddress}) </span>
@@ -97,6 +139,12 @@ const PostDesktop = ({ post }: Comment) => {
           )}
         </blockquote>
       )}
+      {!pinned &&
+        replies.map((reply, index) => (
+          <div key={reply.cid} className={styles.replyContainer}>
+            <ReplyDesktop index={index} reply={reply} />
+          </div>
+        ))}
     </div>
   );
 };
@@ -172,19 +220,12 @@ const PostMobile = ({ post }: Comment) => {
 };
 
 const Post = ({ post }: Comment) => {
-  const replies = useReplies(post);
-
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         <PostDesktop post={post} />
         <PostMobile post={post} />
       </div>
-      {replies.map((reply) => (
-        <div key={reply.cid} className={styles.replyContainer}>
-          <ReplyDesktop reply={reply} />
-        </div>
-      ))}
     </div>
   );
 };
diff --git a/src/themes.css b/src/themes.css
index 920c566b..a1ff5151 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -98,6 +98,9 @@
   
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #e0bfb7;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;

From 99324e753eb2b28398b87a53630ecb0b2173ee2c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 30 Mar 2024 22:19:49 +0100
Subject: [PATCH 02/13] add replies on mobile

---
 src/components/markdown/markdown.module.css |  2 +-
 src/components/post/post.module.css         | 34 ++++++++++++++++--
 src/components/post/post.tsx                | 38 ++++++++++++++++++++-
 src/themes.css                              | 32 +++++++++++++++++
 4 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/src/components/markdown/markdown.module.css b/src/components/markdown/markdown.module.css
index a711d3b4..fbd6783e 100644
--- a/src/components/markdown/markdown.module.css
+++ b/src/components/markdown/markdown.module.css
@@ -22,4 +22,4 @@
 
 .hrWrapper hr {
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index f7c16f82..d8844569 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -171,7 +171,7 @@
 .postMobile .postMenuBtn {
   color: var(--post-mobile-menu-button-color);
   line-height: 1em;
-  width: 10px;
+  width: 1em;
   text-align: center;
   transition: transform 0.1s;
   transform: rotate(90deg);
@@ -264,8 +264,8 @@
 }
 
 .replyDesktop .reply {
-  background-color: #f0e0d6;
-  border: 1px solid #d9bfb7;
+  background-color: var(--reply-desktop-background-color);
+  border: var(--reply-desktop-border);
   border-left: none;
   border-top: none;
   display: table;
@@ -276,6 +276,34 @@
   padding: 3px 3px 0 0;
 }
 
+.replyMobile {
+  padding-top: 7px;
+}
+
+.replyMobile .reply {
+  background-color: var(--post-mobile-background-color);
+}
+
+.replyMobile .postInfo {
+  padding: 5px;
+  border-bottom: var(--post-mobile-info-border-bottom);
+  background-color: var(--post-mobile-info-background-color);
+}
+
+.replyMobile .postInfo .postMenuBtn {
+  width: 1em;
+}
+
+.replyMobile .nameBlock {
+  display: inline;
+  float: left;
+}
+
+.replyMobile .dateTimePostNum {
+  float: right;
+  text-align: right;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index f32b56b8..8fc7859e 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -149,8 +149,36 @@ const PostDesktop = ({ post }: Comment) => {
   );
 };
 
+const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
+  const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
+  const { displayName, shortAddress } = author || {};
+
+  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>
+          <blockquote className={styles.postMessage}>
+            <Markdown content={content} />
+          </blockquote>
+        </div>
+      </div>
+    )
+  );
+};
+
 const PostMobile = ({ post }: Comment) => {
-  const { author, cid, content, link, linkHeight, linkWidth, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const linkCount = countLinksInCommentReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
@@ -159,6 +187,8 @@ const PostMobile = ({ post }: Comment) => {
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
+  const replies = useReplies(post);
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -214,6 +244,12 @@ const PostMobile = ({ post }: Comment) => {
             </Link>
           </div>
         </div>
+        {!pinned &&
+          replies.map((reply, index) => (
+            <div key={reply.cid} className={styles.replyContainer}>
+              <ReplyMobile index={index} reply={reply} />
+            </div>
+          ))}
       </div>
     </div>
   );
diff --git a/src/themes.css b/src/themes.css
index a1ff5151..c2154100 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -100,6 +100,8 @@
 
   /* reply desktop */
   --side-arrows-color: #e0bfb7;
+  --reply-desktop-background-color: #f0e0d6;
+  --reply-desktop-border: 1px solid #d9bfb7;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -201,8 +203,14 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #b7c5d9;
+  --reply-desktop-background-color: #d6daf0;
+  --reply-desktop-border: 1px solid #b7c5d9;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -281,8 +289,14 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #e0bfb7;
+  --reply-desktop-background-color: #f0e0d6;
+  --reply-desktop-border: 1px solid #d9bfb7;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -360,7 +374,13 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+
+  /* reply desktop */
+  --side-arrows-color: #b7c5d9;
+  --reply-desktop-background-color: #d6daf0;
+  --reply-desktop-border: 1px solid #b7c5d9;
   
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -435,8 +455,14 @@
   --post-menu-button-color: #5F89AC;
   --post-menu-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
+
   --post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 
+  /* reply desktop */
+  --side-arrows-color: #c5c8c6;
+  --reply-desktop-background-color: #282a2e;
+  --reply-desktop-border: 1px solid #282a2e;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -505,8 +531,14 @@
   --post-menu-button-color: #FF6600;
   --post-menu-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #333;
+  --reply-desktop-background-color: #ddd;
+  --reply-desktop-border: 1px solid #ccc;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;

From 857e6850b6c504982aac6ae3fd88b323df332a16 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 31 Mar 2024 11:11:31 +0200
Subject: [PATCH 03/13] add spacer for posts without media or content

---
 src/components/post/post.module.css | 5 +++++
 src/components/post/post.tsx        | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index d8844569..25b83eea 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -122,6 +122,11 @@
   color: var(--post-menu-button-color-hover);
 }
 
+.postDesktop .spacer {
+  width: 100%;
+  padding: 5px;
+}
+
 .postDesktop .postMessage, .replyDesktop .postMessage {
   padding: 1em 40px;
 }
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 8fc7859e..ccddc3c5 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -128,6 +128,7 @@ const PostDesktop = ({ post }: Comment) => {
         </span>
         <span className={styles.postMenuBtn}>▶</span>
       </div>
+      {!content && !link && <div className={styles.spacer} />}
       {content && (
         <blockquote className={styles.postMessage}>
           <Markdown content={displayContent} />

From 6cc9a6fa332b105bb0c83a48dd20323eefc25783 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 14:24:10 +0200
Subject: [PATCH 04/13] add click to enlarge media on desktop

---
 public/translations/ar/default.json   |  3 +-
 public/translations/bn/default.json   |  3 +-
 public/translations/cs/default.json   |  3 +-
 public/translations/da/default.json   |  3 +-
 public/translations/de/default.json   |  3 +-
 public/translations/el/default.json   |  3 +-
 public/translations/en/default.json   |  3 +-
 public/translations/es/default.json   |  3 +-
 public/translations/fa/default.json   |  3 +-
 public/translations/fi/default.json   |  3 +-
 public/translations/fil/default.json  |  3 +-
 public/translations/fr/default.json   |  3 +-
 public/translations/he/default.json   |  3 +-
 public/translations/hi/default.json   |  3 +-
 public/translations/hu/default.json   |  3 +-
 public/translations/id/default.json   |  3 +-
 public/translations/it/default.json   |  3 +-
 public/translations/ja/default.json   |  3 +-
 public/translations/ko/default.json   |  3 +-
 public/translations/mr/default.json   |  3 +-
 public/translations/nl/default.json   |  3 +-
 public/translations/no/default.json   |  3 +-
 public/translations/pl/default.json   |  3 +-
 public/translations/pt/default.json   |  3 +-
 public/translations/ro/default.json   |  3 +-
 public/translations/ru/default.json   |  3 +-
 public/translations/sq/default.json   |  3 +-
 public/translations/sv/default.json   |  3 +-
 public/translations/te/default.json   |  3 +-
 public/translations/th/default.json   |  3 +-
 public/translations/tr/default.json   |  3 +-
 public/translations/uk/default.json   |  3 +-
 public/translations/ur/default.json   |  3 +-
 public/translations/vi/default.json   |  3 +-
 public/translations/zh/default.json   |  3 +-
 src/components/media/index.ts         |  2 +-
 src/components/media/media.module.css | 32 +++++++++++++++++++
 src/components/media/media.tsx        | 42 ++++++++++++++++++++++---
 src/components/post/post.module.css   | 19 ++++++-----
 src/components/post/post.tsx          | 45 ++++++++++++++++++++++-----
 src/views/subplebbit/subplebbit.tsx   | 18 +++++------
 41 files changed, 197 insertions(+), 66 deletions(-)

diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json
index 663b6bac..2e3d7448 100644
--- a/public/translations/ar/default.json
+++ b/public/translations/ar/default.json
@@ -35,5 +35,6 @@
   "sticky": "مثبت",
   "closed": "مغلق",
   "reply": "رد",
-  "link": "رابط"
+  "link": "رابط",
+  "close": "إغلاق"
 }
\ No newline at end of file
diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json
index e6841dba..599d93d2 100644
--- a/public/translations/bn/default.json
+++ b/public/translations/bn/default.json
@@ -35,5 +35,6 @@
   "sticky": "স্টিকি",
   "closed": "বন্ধ",
   "reply": "উত্তর",
-  "link": "লিংক"
+  "link": "লিংক",
+  "close": "বন্ধ করুন"
 }
\ No newline at end of file
diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json
index eaa23be4..5567eec6 100644
--- a/public/translations/cs/default.json
+++ b/public/translations/cs/default.json
@@ -35,5 +35,6 @@
   "sticky": "Připnutý",
   "closed": "Zavřeno",
   "reply": "Odpovědět",
-  "link": "Odkaz"
+  "link": "Odkaz",
+  "close": "Zavřít"
 }
\ No newline at end of file
diff --git a/public/translations/da/default.json b/public/translations/da/default.json
index d7cec533..ef42d6c7 100644
--- a/public/translations/da/default.json
+++ b/public/translations/da/default.json
@@ -35,5 +35,6 @@
   "sticky": "Fikseret",
   "closed": "Lukket",
   "reply": "Svar",
-  "link": "Link"
+  "link": "Link",
+  "close": "Luk"
 }
\ No newline at end of file
diff --git a/public/translations/de/default.json b/public/translations/de/default.json
index ffcd042b..0b70dbef 100644
--- a/public/translations/de/default.json
+++ b/public/translations/de/default.json
@@ -35,5 +35,6 @@
   "sticky": "Angeheftet",
   "closed": "Geschlossen",
   "reply": "Antworten",
-  "link": "Link"
+  "link": "Link",
+  "close": "Schließen"
 }
\ No newline at end of file
diff --git a/public/translations/el/default.json b/public/translations/el/default.json
index f4da5ddf..7b8ab0eb 100644
--- a/public/translations/el/default.json
+++ b/public/translations/el/default.json
@@ -35,5 +35,6 @@
   "sticky": "Κολλημένος",
   "closed": "Κλειστό",
   "reply": "Απάντηση",
-  "link": "Σύνδεσμος"
+  "link": "Σύνδεσμος",
+  "close": "Κλείσιμο"
 }
\ No newline at end of file
diff --git a/public/translations/en/default.json b/public/translations/en/default.json
index c71b3ba3..fd7a3ece 100644
--- a/public/translations/en/default.json
+++ b/public/translations/en/default.json
@@ -35,5 +35,6 @@
   "sticky": "Sticky",
   "closed": "Closed",
   "reply": "Reply",
-  "link": "Link"
+  "link": "Link",
+  "close": "Close"
 }
\ No newline at end of file
diff --git a/public/translations/es/default.json b/public/translations/es/default.json
index 6d42fd5a..b074ea9c 100644
--- a/public/translations/es/default.json
+++ b/public/translations/es/default.json
@@ -35,5 +35,6 @@
   "sticky": "Fijado",
   "closed": "Cerrado",
   "reply": "Responder",
-  "link": "Enlace"
+  "link": "Enlace",
+  "close": "Cerrar"
 }
\ No newline at end of file
diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json
index b3939b18..df7c6d93 100644
--- a/public/translations/fa/default.json
+++ b/public/translations/fa/default.json
@@ -35,5 +35,6 @@
   "sticky": "چسبیده",
   "closed": "بسته",
   "reply": "پاسخ",
-  "link": "لینک"
+  "link": "لینک",
+  "close": "بستن"
 }
\ No newline at end of file
diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json
index 260470c1..e18b9cb7 100644
--- a/public/translations/fi/default.json
+++ b/public/translations/fi/default.json
@@ -35,5 +35,6 @@
   "sticky": "Tikki",
   "closed": "Suljettu",
   "reply": "Vastaa",
-  "link": "Linkki"
+  "link": "Linkki",
+  "close": "Sulje"
 }
\ No newline at end of file
diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json
index 906f3139..a9e5500b 100644
--- a/public/translations/fil/default.json
+++ b/public/translations/fil/default.json
@@ -35,5 +35,6 @@
   "sticky": "Malagkit",
   "closed": "Sarado",
   "reply": "Tumugon",
-  "link": "Link"
+  "link": "Link",
+  "close": "Isara"
 }
\ No newline at end of file
diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json
index 82b809eb..c280ebdf 100644
--- a/public/translations/fr/default.json
+++ b/public/translations/fr/default.json
@@ -35,5 +35,6 @@
   "sticky": "Épinglé",
   "closed": "Fermé",
   "reply": "Répondre",
-  "link": "Lien"
+  "link": "Lien",
+  "close": "Fermer"
 }
\ No newline at end of file
diff --git a/public/translations/he/default.json b/public/translations/he/default.json
index 01696c34..01f4291c 100644
--- a/public/translations/he/default.json
+++ b/public/translations/he/default.json
@@ -35,5 +35,6 @@
   "sticky": "מדבקה",
   "closed": "סגור",
   "reply": "הגב",
-  "link": "קישור"
+  "link": "קישור",
+  "close": "סגור"
 }
\ No newline at end of file
diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json
index 9a89200f..41c1cc6c 100644
--- a/public/translations/hi/default.json
+++ b/public/translations/hi/default.json
@@ -35,5 +35,6 @@
   "sticky": "चिपकाया",
   "closed": "बंद",
   "reply": "जवाब दें",
-  "link": "लिंक"
+  "link": "लिंक",
+  "close": "बंद करें"
 }
\ No newline at end of file
diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json
index a46d051c..fa163ed1 100644
--- a/public/translations/hu/default.json
+++ b/public/translations/hu/default.json
@@ -35,5 +35,6 @@
   "sticky": "Rögzített",
   "closed": "Zárt",
   "reply": "Válaszolás",
-  "link": "Hivatkozás"
+  "link": "Hivatkozás",
+  "close": "Bezárás"
 }
\ No newline at end of file
diff --git a/public/translations/id/default.json b/public/translations/id/default.json
index 22eca110..713dae0b 100644
--- a/public/translations/id/default.json
+++ b/public/translations/id/default.json
@@ -35,5 +35,6 @@
   "sticky": "Menempel",
   "closed": "Tutup",
   "reply": "Balas",
-  "link": "Tautan"
+  "link": "Tautan",
+  "close": "Tutup"
 }
\ No newline at end of file
diff --git a/public/translations/it/default.json b/public/translations/it/default.json
index e3a136da..f2711100 100644
--- a/public/translations/it/default.json
+++ b/public/translations/it/default.json
@@ -35,5 +35,6 @@
   "sticky": "Incollato",
   "closed": "Chiuso",
   "reply": "Commenta",
-  "link": "Link"
+  "link": "Link",
+  "close": "Chiudi"
 }
\ No newline at end of file
diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json
index e768b471..c9188154 100644
--- a/public/translations/ja/default.json
+++ b/public/translations/ja/default.json
@@ -35,5 +35,6 @@
   "sticky": "固定",
   "closed": "閉鎖",
   "reply": "返信",
-  "link": "リンク"
+  "link": "リンク",
+  "close": "閉じる"
 }
\ No newline at end of file
diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json
index 169f2a9b..211ca353 100644
--- a/public/translations/ko/default.json
+++ b/public/translations/ko/default.json
@@ -35,5 +35,6 @@
   "sticky": "고정된",
   "closed": "닫힘",
   "reply": "답장",
-  "link": "링크"
+  "link": "링크",
+  "close": "닫기"
 }
\ No newline at end of file
diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json
index f07f951a..5d1e6e45 100644
--- a/public/translations/mr/default.json
+++ b/public/translations/mr/default.json
@@ -35,5 +35,6 @@
   "sticky": "स्टिकी",
   "closed": "बंद",
   "reply": "प्रतिसाद",
-  "link": "लिंक"
+  "link": "लिंक",
+  "close": "बंद करा"
 }
\ No newline at end of file
diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json
index 117211e7..bebc2898 100644
--- a/public/translations/nl/default.json
+++ b/public/translations/nl/default.json
@@ -35,5 +35,6 @@
   "sticky": "Vastgemaakt",
   "closed": "Gesloten",
   "reply": "Antwoord",
-  "link": "Link"
+  "link": "Link",
+  "close": "Sluiten"
 }
\ No newline at end of file
diff --git a/public/translations/no/default.json b/public/translations/no/default.json
index c7f15acf..4ef75474 100644
--- a/public/translations/no/default.json
+++ b/public/translations/no/default.json
@@ -35,5 +35,6 @@
   "sticky": "Klistret",
   "closed": "Stengt",
   "reply": "Svar",
-  "link": "Lenke"
+  "link": "Lenke",
+  "close": "Lukk"
 }
\ No newline at end of file
diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json
index b59d2ed9..19d8f858 100644
--- a/public/translations/pl/default.json
+++ b/public/translations/pl/default.json
@@ -35,5 +35,6 @@
   "sticky": "Przyklejony",
   "closed": "Zamknięty",
   "reply": "Odpowiedz",
-  "link": "Link"
+  "link": "Link",
+  "close": "Zamknij"
 }
\ No newline at end of file
diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json
index a62cabcd..3dff89f8 100644
--- a/public/translations/pt/default.json
+++ b/public/translations/pt/default.json
@@ -35,5 +35,6 @@
   "sticky": "Fixado",
   "closed": "Fechado",
   "reply": "Responder",
-  "link": "Link"
+  "link": "Link",
+  "close": "Fechar"
 }
\ No newline at end of file
diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json
index bf2bf9b9..5efc2d71 100644
--- a/public/translations/ro/default.json
+++ b/public/translations/ro/default.json
@@ -35,5 +35,6 @@
   "sticky": "Lipit",
   "closed": "Închis",
   "reply": "Răspunde",
-  "link": "Legătură"
+  "link": "Legătură",
+  "close": "Închide"
 }
\ No newline at end of file
diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json
index 52385ba0..861ba685 100644
--- a/public/translations/ru/default.json
+++ b/public/translations/ru/default.json
@@ -35,5 +35,6 @@
   "sticky": "Прикреплено",
   "closed": "Закрыто",
   "reply": "Ответить",
-  "link": "Ссылка"
+  "link": "Ссылка",
+  "close": "Закрыть"
 }
\ No newline at end of file
diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json
index 63621971..de5e2153 100644
--- a/public/translations/sq/default.json
+++ b/public/translations/sq/default.json
@@ -35,5 +35,6 @@
   "sticky": "Ngjitës",
   "closed": "Mbyllur",
   "reply": "Përgjigju",
-  "link": "Lidhje"
+  "link": "Lidhje",
+  "close": "Mbylle"
 }
\ No newline at end of file
diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json
index 6bc0658d..47d4594a 100644
--- a/public/translations/sv/default.json
+++ b/public/translations/sv/default.json
@@ -35,5 +35,6 @@
   "sticky": "Klistrad",
   "closed": "Stängd",
   "reply": "Svara",
-  "link": "Länk"
+  "link": "Länk",
+  "close": "Stäng"
 }
\ No newline at end of file
diff --git a/public/translations/te/default.json b/public/translations/te/default.json
index a3e3c396..298c7e79 100644
--- a/public/translations/te/default.json
+++ b/public/translations/te/default.json
@@ -35,5 +35,6 @@
   "sticky": "స్టికీ",
   "closed": "మూసివేయబడినది",
   "reply": "స్పందించు",
-  "link": "లింక్"
+  "link": "లింక్",
+  "close": "మూసి"
 }
\ No newline at end of file
diff --git a/public/translations/th/default.json b/public/translations/th/default.json
index 0973f222..67a35584 100644
--- a/public/translations/th/default.json
+++ b/public/translations/th/default.json
@@ -35,5 +35,6 @@
   "sticky": "ปักหมุด",
   "closed": "ปิด",
   "reply": "ตอบ",
-  "link": "ลิงก์"
+  "link": "ลิงก์",
+  "close": "ปิด"
 }
\ No newline at end of file
diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json
index ec66b4cb..35ebb6c8 100644
--- a/public/translations/tr/default.json
+++ b/public/translations/tr/default.json
@@ -35,5 +35,6 @@
   "sticky": "Yapışkan",
   "closed": "Kapalı",
   "reply": "Yanıtla",
-  "link": "Bağlantı"
+  "link": "Bağlantı",
+  "close": "Kapat"
 }
\ No newline at end of file
diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json
index 946bfba8..394f73c1 100644
--- a/public/translations/uk/default.json
+++ b/public/translations/uk/default.json
@@ -35,5 +35,6 @@
   "sticky": "Прикріплений",
   "closed": "Закрито",
   "reply": "Відповісти",
-  "link": "Посилання"
+  "link": "Посилання",
+  "close": "Закрити"
 }
\ No newline at end of file
diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json
index fe87a666..01b2a8e0 100644
--- a/public/translations/ur/default.json
+++ b/public/translations/ur/default.json
@@ -35,5 +35,6 @@
   "sticky": "چسپی",
   "closed": "بند",
   "reply": "جواب دیں",
-  "link": "لنک"
+  "link": "لنک",
+  "close": "بند کریں"
 }
\ No newline at end of file
diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json
index 9acc2e8a..bc120e18 100644
--- a/public/translations/vi/default.json
+++ b/public/translations/vi/default.json
@@ -35,5 +35,6 @@
   "sticky": "Dán",
   "closed": "Đóng",
   "reply": "Trả lời",
-  "link": "Liên kết"
+  "link": "Liên kết",
+  "close": "Đóng"
 }
\ No newline at end of file
diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json
index 9b9b2398..ef8d7544 100644
--- a/public/translations/zh/default.json
+++ b/public/translations/zh/default.json
@@ -35,5 +35,6 @@
   "sticky": "置顶",
   "closed": "关闭",
   "reply": "回复",
-  "link": "链接"
+  "link": "链接",
+  "close": "关闭"
 }
\ No newline at end of file
diff --git a/src/components/media/index.ts b/src/components/media/index.ts
index dd4f5658..a4ea5ec0 100644
--- a/src/components/media/index.ts
+++ b/src/components/media/index.ts
@@ -1 +1 @@
-export { Thumbnail, Media } from './media';
+export { default } from './media';
diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
index 1bfde978..65ccb536 100644
--- a/src/components/media/media.module.css
+++ b/src/components/media/media.module.css
@@ -3,6 +3,7 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 20px 5px 0;
+  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13,6 +14,7 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 10px 5px 5px;
+  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,3 +29,33 @@
   max-width: 125px;
   max-height: 125px;
 }
+
+.hide {
+  display: none !important;
+}
+
+.thumbnail .show {
+  display: block;
+}
+
+.content img {
+  cursor: pointer;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.content iframe {
+  border: none;
+}
+
+@media (min-width: 640px) {
+  .media img, .media iframe, .media video, .media audio {
+    margin: 3px 20px 5px 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .media img, .media iframe, .media video, .media audio {
+    margin: 3px 10px 5px 5px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index 10687714..d39d0c62 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './media.module.css';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
+import Embed from '../embed';
 
-interface ThumbnailProps {
+interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
   isMobile: boolean;
   isReply: boolean;
   linkHeight?: number;
   linkWidth?: number;
+  showThumbnail: boolean;
+  setShowThumbnail: (showThumbnail: boolean) => void;
   toggleExpanded?: () => void;
 }
 
@@ -24,7 +27,7 @@ const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; child
   </span>
 );
 
-export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
+const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: MediaProps) => {
   let displayWidth, displayHeight;
   const maxThumbnailSize = isMobile || isReply ? 125 : 250;
   if (linkWidth && linkHeight) {
@@ -60,6 +63,35 @@ export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, lin
   );
 };
 
-export const Media = () => {
-  return <></>;
+const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+  return (
+    <span className={styles.content}>
+      <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
+        <Thumbnail
+          commentMediaInfo={commentMediaInfo}
+          isMobile={isMobile}
+          isReply={isReply}
+          linkHeight={linkHeight}
+          linkWidth={linkWidth}
+          showThumbnail={showThumbnail}
+          setShowThumbnail={setShowThumbnail}
+        />
+      </span>
+      <span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
+        {commentMediaInfo?.type === 'iframe' ? (
+          <Embed url={commentMediaInfo.url} />
+        ) : commentMediaInfo?.type === 'gif' ? (
+          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+        ) : commentMediaInfo?.type === 'video' ? (
+          <video src={commentMediaInfo.url} controls autoPlay loop muted />
+        ) : commentMediaInfo?.type === 'image' ? (
+          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+        ) : commentMediaInfo?.type === 'webpage' ? (
+          <img src={commentMediaInfo.url} alt='' />
+        ) : null}
+      </span>
+    </span>
+  );
 };
+
+export default Media;
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 25b83eea..3db399d7 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -40,10 +40,6 @@
   background-image: var(--post-unhide-button-background-image);
 }
 
-.postDesktop .fileThumb {
-  float: left;
-}
-
 .postDesktop .fileText a {
   color: var(--post-link-text-color);
   text-decoration: var(--post-link-text-decoration);
@@ -97,6 +93,17 @@
   image-rendering: pixelated;
 }
 
+.postDesktop .closeMedia {
+  color: var(--button-desktop-text-color);
+  text-decoration: underline;
+  text-transform: capitalize;
+}
+
+.postDesktop .closeMedia:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
 .postDesktop .replyButton {
   padding-left: 10px;
 }
@@ -210,10 +217,6 @@
   text-align: right;
 }
 
-.postMobile .fileThumb {
-  float: left;
-}
-
 .postMobile .fileThumb .fileInfo {
   padding-bottom: 5px;
   text-align: center;
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index ccddc3c5..88f16140 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -6,7 +7,7 @@ import { getFormattedDate } from '../../lib/utils/time-utils';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
 import Markdown from '../markdown';
-import { Thumbnail } from '../media';
+import Media from '../media';
 
 import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
 
@@ -69,6 +70,8 @@ const PostDesktop = ({ post }: Comment) => {
 
   const replies = useReplies(post);
 
+  const [showThumbnail, setShowThumbnail] = useState(true);
+
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
@@ -85,11 +88,27 @@ const PostDesktop = ({ post }: Comment) => {
               {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
             </a>{' '}
             ({commentMediaInfo?.type})
+            {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+              <span>
+                {' '}
+                [
+                <span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
+                  {t('close')}
+                </span>
+                ]
+              </span>
+            )}
           </div>
           {hasThumbnail && (
-            <span className={styles.fileThumb}>
-              <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={false} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
-            </span>
+            <Media
+              commentMediaInfo={commentMediaInfo}
+              isMobile={false}
+              isReply={false}
+              linkHeight={linkHeight}
+              linkWidth={linkWidth}
+              showThumbnail={showThumbnail}
+              setShowThumbnail={setShowThumbnail}
+            />
           )}
         </div>
       )}
@@ -128,7 +147,7 @@ const PostDesktop = ({ post }: Comment) => {
         </span>
         <span className={styles.postMenuBtn}>▶</span>
       </div>
-      {!content && !link && <div className={styles.spacer} />}
+      {!content && <div className={styles.spacer} />}
       {content && (
         <blockquote className={styles.postMessage}>
           <Markdown content={displayContent} />
@@ -190,6 +209,8 @@ const PostMobile = ({ post }: Comment) => {
 
   const replies = useReplies(post);
 
+  const [showThumbnail, setShowThumbnail] = useState(true);
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -218,10 +239,18 @@ const PostMobile = ({ post }: Comment) => {
               </span>
             </div>
             {hasThumbnail && (
-              <span className={styles.fileThumb}>
-                <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={true} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
+              <>
+                <Media
+                  commentMediaInfo={commentMediaInfo}
+                  isMobile={true}
+                  isReply={false}
+                  linkHeight={linkHeight}
+                  linkWidth={linkWidth}
+                  showThumbnail={showThumbnail}
+                  setShowThumbnail={setShowThumbnail}
+                />
                 {commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
-              </span>
+              </>
             )}
             {content && (
               <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index 33029a82..b47192b5 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -15,22 +15,17 @@ interface SubplebbitProps {
 
 const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
   const { t } = useTranslation();
-
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
-  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
   const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
-  const { shortAddress, state, title } = subplebbit || {};
-
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
+
+  const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
+  const { shortAddress, state, title } = subplebbit || {};
+
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
-
   const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
 
-  useEffect(() => {
-    document.title = title ? title : shortAddress;
-  }, [title, shortAddress]);
-
   const Footer = () => {
     let footerContent;
     if (feed.length === 0) {
@@ -57,6 +52,11 @@ const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
   }, [subplebbitAddress, sortType]);
 
   const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType];
+
+  useEffect(() => {
+    document.title = title ? title : shortAddress;
+  }, [title, shortAddress]);
+
   return (
     <div className={styles.content}>
       <Virtuoso

From 0e734cfc41233a68e613fbae1acbe8b7db2233bb Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 14:58:07 +0200
Subject: [PATCH 05/13] add click to enlarge media on mobile with close button

---
 src/components/media/media.module.css | 29 +++++++++++++++++++++---
 src/components/media/media.tsx        | 32 ++++++++++++++++++++++++---
 src/components/post/post.module.css   |  8 -------
 src/components/post/post.tsx          |  1 -
 4 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
index 65ccb536..d4439015 100644
--- a/src/components/media/media.module.css
+++ b/src/components/media/media.module.css
@@ -3,7 +3,6 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 20px 5px 0;
-  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,12 +13,15 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 10px 5px 5px;
-  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.thumbnail {
+  float: left;
+}
+
 .thumbnailBig img, .thumbnailBig video {
   max-width: 250px;
   max-height: 250px;
@@ -48,6 +50,27 @@
   border: none;
 }
 
+.fileInfo {
+  padding-bottom: 5px;
+  text-align: center;
+  color: var(--post-mobile-file-info-text-color); 
+  font-size: 9pt;
+}
+
+.fileInfo a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-link-text-decoration);
+}
+
+.fileInfo a:hover {
+  color: var(--post-link-text-color-hover);
+}
+
+.closeButton {
+  text-align: center;
+  padding: 5px 0 10px 0;
+}
+
 @media (min-width: 640px) {
   .media img, .media iframe, .media video, .media audio {
     margin: 3px 20px 5px 0;
@@ -56,6 +79,6 @@
 
 @media (max-width: 640px) {
   .media img, .media iframe, .media video, .media audio {
-    margin: 3px 10px 5px 5px;
+    padding: 3px 0 5px 0;
   }
 }
\ No newline at end of file
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index d39d0c62..c0df856d 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -3,6 +3,7 @@ import styles from './media.module.css';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import Embed from '../embed';
+import { useTranslation } from 'react-i18next';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
@@ -15,13 +16,19 @@ interface MediaProps {
   toggleExpanded?: () => void;
 }
 
-const ThumbnailBig = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
+interface ThumbnailProps {
+  style: React.CSSProperties;
+  children: React.ReactNode;
+  type?: string;
+}
+
+const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
   <span className={styles.thumbnailBig} style={style}>
     {children}
   </span>
 );
 
-const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
+const ThumbnailSmall = ({ style, children, type }: ThumbnailProps) => (
   <span className={styles.thumbnailSmall} style={style}>
     {children}
   </span>
@@ -57,13 +64,16 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth
   const thumbnailStyle = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   return isMobile || isReply ? (
-    <ThumbnailSmall style={thumbnailStyle}>{mediaComponent}</ThumbnailSmall>
+    <ThumbnailSmall style={thumbnailStyle} type={commentMediaInfo?.type}>
+      {mediaComponent}
+    </ThumbnailSmall>
   ) : (
     <ThumbnailBig style={thumbnailStyle}>{mediaComponent}</ThumbnailBig>
   );
 };
 
 const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+  const { t } = useTranslation();
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
@@ -76,6 +86,7 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
           showThumbnail={showThumbnail}
           setShowThumbnail={setShowThumbnail}
         />
+        {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
       </span>
       <span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
         {commentMediaInfo?.type === 'iframe' ? (
@@ -89,6 +100,21 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
         ) : commentMediaInfo?.type === 'webpage' ? (
           <img src={commentMediaInfo.url} alt='' />
         ) : null}
+        {isMobile && commentMediaInfo?.type && (
+          <div className={styles.fileInfo}>
+            <a href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
+              {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
+            </a>{' '}
+            ({commentMediaInfo?.type})
+          </div>
+        )}
+        {isMobile && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+          <div className={styles.closeButton}>
+            <span className='button' onClick={() => setShowThumbnail(true)}>
+              {t('close')}
+            </span>
+          </div>
+        )}
       </span>
     </span>
   );
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 3db399d7..9e5a2433 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -217,14 +217,6 @@
   text-align: right;
 }
 
-.postMobile .fileThumb .fileInfo {
-  padding-bottom: 5px;
-  text-align: center;
-  color: var(--post-mobile-file-info-text-color); 
-  font-size: 9pt;
-  display: block;
-}
-
 .postMobile .postMessage {
   padding: 10px;
   font-size: var(--post-mobile-content-font-size);
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 88f16140..3792c94f 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -249,7 +249,6 @@ const PostMobile = ({ post }: Comment) => {
                   showThumbnail={showThumbnail}
                   setShowThumbnail={setShowThumbnail}
                 />
-                {commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
               </>
             )}
             {content && (

From 510bd7027a549e4205c950b3e2d45df517138b10 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 15:33:30 +0200
Subject: [PATCH 06/13] Update media.tsx

---
 src/components/media/media.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index c0df856d..7054b4f5 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -98,7 +98,7 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
         ) : commentMediaInfo?.type === 'image' ? (
           <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
         ) : commentMediaInfo?.type === 'webpage' ? (
-          <img src={commentMediaInfo.url} alt='' />
+          <img src={commentMediaInfo.thumbnail} alt='' onClick={() => setShowThumbnail(true)} />
         ) : null}
         {isMobile && commentMediaInfo?.type && (
           <div className={styles.fileInfo}>

From c2f1007d1c4c1ccfcc7bfbda1d6218b583859b18 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 17:39:10 +0200
Subject: [PATCH 07/13] add media to replies on mobile, adjust padding on all
 media

---
 src/components/media/media.module.css | 16 ++---
 src/components/media/media.tsx        | 17 +++--
 src/components/post/post.module.css   |  9 ++-
 src/components/post/post.tsx          | 94 +++++++++++++++++++--------
 4 files changed, 92 insertions(+), 44 deletions(-)

diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
index d4439015..4510e08a 100644
--- a/src/components/media/media.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index 7054b4f5..b80b5570 100644
--- a/src/components/media/media.tsx
+++ b/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' ? (
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 9e5a2433..99222cb5 100644
--- a/src/components/post/post.module.css
+++ b/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);
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 3792c94f..2110ebd8 100644
--- a/src/components/post/post.tsx
+++ b/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}`}>

From b5769eacb30bf3c6a993469af4067810ce8f253d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 21:07:36 +0200
Subject: [PATCH 08/13] add close button for videos in replies

---
 src/components/post/post.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 2110ebd8..24119cb6 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -58,6 +58,16 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
                 <a href={link} target='_blank' rel='noopener noreferrer'>
                   {link.length > 30 ? link.slice(0, 30) + '...' : link}
                 </a>
+                {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
+                  <span>
+                    {' '}
+                    [
+                    <span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
+                      {t('close')}
+                    </span>
+                    ]
+                  </span>
+                )}
               </div>
               {hasThumbnail && (
                 <Media

From 0d6e8f2e4e883194f29c8a006b2a5efe8cd5dbb8 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Apr 2024 21:33:48 +0200
Subject: [PATCH 09/13] adjust padding for media

---
 src/components/media/media.module.css | 8 ++++++++
 src/components/media/media.tsx        | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
index 4510e08a..65900532 100644
--- a/src/components/media/media.module.css
+++ b/src/components/media/media.module.css
@@ -81,4 +81,12 @@
 
 .mediaMobile img, .mediaMobile video, .mediaMobile iframe, .mediaMobile audio {
   padding: 3px 0 5px 0;
+}
+
+.mediaDesktopReply img, .mediaDesktopReply video, .mediaDesktopReply iframe, .mediaDesktopReply audio {
+  padding: 3px 20px 5px 20px;
+}
+
+.mediaDesktopOp img, .mediaDesktopOp video, .mediaDesktopOp iframe, .mediaDesktopOp audio {
+  padding: 3px 20px 5px 0;
 }
\ No newline at end of file
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index b80b5570..cdffeb1a 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -75,7 +75,7 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth
 
 const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
-  const mediaClass = isMobile ? styles.mediaMobile : styles.mediaDesktop;
+  const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
 
   return (
     <span className={styles.content}>

From 8dca42e469c30bc839f1ecebd00a8ddf1dae8770 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 2 Apr 2024 10:31:14 +0200
Subject: [PATCH 10/13] style(board banner): adjust padding

---
 src/components/board-banner/board-banner.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css
index 9036e4af..badb3d81 100644
--- a/src/components/board-banner/board-banner.module.css
+++ b/src/components/board-banner/board-banner.module.css
@@ -34,4 +34,10 @@
   .bannerCnt {
     padding-top: 35px;
   }
+ }
+
+ @media (min-width: 640px) {
+  .bannerCnt {
+    padding: 5px 0 2px 0;
+  }
  }
\ No newline at end of file

From fa7564b559f5692c5abb26a20f92284733926fae Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 2 Apr 2024 12:23:18 +0200
Subject: [PATCH 11/13] add counter for omitted replies and links in replies

---
 src/components/post/post.module.css     | 27 +++++++++++++++++++++++++
 src/components/post/post.tsx            | 20 ++++++++++++++----
 src/hooks/use-count-links-in-replies.ts | 20 ++++++++++++++++++
 src/lib/utils/comment-utils.ts          | 19 -----------------
 src/themes.css                          | 10 +++++++++
 5 files changed, 73 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/use-count-links-in-replies.ts
 delete mode 100644 src/lib/utils/comment-utils.ts

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 99222cb5..1dfa856d 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -153,6 +153,33 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
+.postDesktop .summary {
+  padding-top: 10px;
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.postDesktop .summary .expandButton {
+  background-image: var(--post-replies-expand-button-background-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  image-rendering: pixelated;
+  margin: 0 3px -4px 2px;
+  cursor: pointer;
+}
+
+.postDesktop .summary a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.postDesktop .summary a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 .postMobile hr {
   padding-bottom: 30px;
 }
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 24119cb6..8d450319 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -4,13 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
 import Markdown from '../markdown';
 import Media from '../media';
 
-import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
-
 const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
   const { t } = useTranslation();
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
@@ -95,7 +94,7 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
 
 const PostDesktop = ({ post }: Comment) => {
   const { t } = useTranslation();
-  const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
   const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
@@ -105,6 +104,10 @@ const PostDesktop = ({ post }: Comment) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   const replies = useReplies(post);
+  const visibleLinkCount = useCountLinksInReplies(post, 5);
+  const totalLinkCount = useCountLinksInReplies(post);
+  const repliesCount = pinned ? replyCount : replyCount - 5;
+  const linkCount = pinned ? totalLinkCount : totalLinkCount - visibleLinkCount;
 
   return (
     <div className={styles.postDesktop}>
@@ -193,6 +196,15 @@ const PostDesktop = ({ post }: Comment) => {
           )}
         </blockquote>
       )}
+      {(replies.length > 5 || pinned) && (
+        <span className={styles.summary}>
+          <span className={styles.expandButton} />
+          <span>
+            {repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '}
+          </span>
+          <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view.
+        </span>
+      )}
       {!pinned &&
         replies.map((reply, index) => (
           <div key={reply.cid} className={styles.replyContainer}>
@@ -251,7 +263,7 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
 const PostMobile = ({ post }: Comment) => {
   const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
-  const linkCount = countLinksInCommentReplies(post);
+  const linkCount = useCountLinksInReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;
 
diff --git a/src/hooks/use-count-links-in-replies.ts b/src/hooks/use-count-links-in-replies.ts
new file mode 100644
index 00000000..bf092866
--- /dev/null
+++ b/src/hooks/use-count-links-in-replies.ts
@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
+
+const useCountLinksInReplies = (comment: Comment, firstXReplies?: number) => {
+  let linkCount = 0;
+  const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]);
+
+  const repliesToConsider = firstXReplies !== undefined ? flattenedReplies.slice(0, firstXReplies) : flattenedReplies;
+
+  for (let reply of repliesToConsider) {
+    if (reply.link) {
+      linkCount++;
+    }
+  }
+
+  return linkCount;
+};
+
+export default useCountLinksInReplies;
diff --git a/src/lib/utils/comment-utils.ts b/src/lib/utils/comment-utils.ts
deleted file mode 100644
index 75b500e9..00000000
--- a/src/lib/utils/comment-utils.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Comment } from '@plebbit/plebbit-react-hooks';
-
-export const countLinksInCommentReplies = (comment: Comment) => {
-  let linkCount = 0;
-
-  if (comment.replyCount > 0) {
-    for (let reply of comment.replies.pages.topAll.comments) {
-      if (reply.link) {
-        linkCount++;
-      }
-
-      if (reply.replyCount > 0) {
-        linkCount += countLinksInCommentReplies(reply);
-      }
-    }
-  }
-
-  return linkCount;
-};
diff --git a/src/themes.css b/src/themes.css
index c2154100..b8b9910e 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -78,6 +78,7 @@
   --post-menu-button-color: #000080;
   --post-menu-button-color-hover: red;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -189,6 +190,9 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
+
+  /* post mobile */
   --post-mobile-background-color: #d6daf0;
   --post-mobile-info-border-bottom: 1px solid #b7c5d9;
   --post-mobile-info-background-color: #c9cde8;
@@ -275,6 +279,9 @@
   --post-menu-button-color: #000080;
   --post-menu-button-color-hover: red;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
+
+  /* post mobile */
   --post-mobile-background-color: #f5e9e1;
   --post-mobile-info-border-bottom: 1px solid #d9bfb7;
   --post-mobile-info-background-color: #ead6ca;
@@ -374,6 +381,7 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
 
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
@@ -455,6 +463,7 @@
   --post-menu-button-color: #5F89AC;
   --post-menu-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
 
   --post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 
@@ -531,6 +540,7 @@
   --post-menu-button-color: #FF6600;
   --post-menu-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
 
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 

From 7c7d1331007fd91651288d4da49dab7b3161d728 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 2 Apr 2024 12:54:56 +0200
Subject: [PATCH 12/13] style(media): adjust positioning and size

---
 src/components/media/media.module.css | 8 ++++++--
 src/components/post/post.module.css   | 7 -------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
index 65900532..cd1f01bf 100644
--- a/src/components/media/media.module.css
+++ b/src/components/media/media.module.css
@@ -40,12 +40,16 @@
   display: block;
 }
 
-.content img {
-  cursor: pointer;
+.content img, .content video, .content iframe, .content audio {
+  box-sizing: border-box;
   max-width: 100%;
   max-height: 100%;
 }
 
+.content img {
+  cursor: pointer;
+}
+
 .content iframe {
   border: none;
 }
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 1dfa856d..022a05b7 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -311,13 +311,6 @@
   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);

From 77eaf9ede78811015341e336b8ffffa5c3edda9d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 2 Apr 2024 12:59:33 +0200
Subject: [PATCH 13/13] apply clearfix only on mobile replies

---
 src/components/post/post.module.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 022a05b7..ea7ac08b 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -311,6 +311,13 @@
   background-color: var(--post-mobile-background-color);
 }
 
+/* clearfix to the container of the floatied elements to contain them */
+.replyMobile .replyContainer::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .replyMobile .postInfo {
   padding: 5px;
   border-bottom: var(--post-mobile-info-border-bottom);