style(home): make popular threads box styling identical to 4chan

src/components/styled/views/Home.styled.jsx

@@ -277,18 +277,19 @@ export const BoardsContent = styled.div`
   }
 
   .board-avatar-container {
-    width: 150px;
-    height: 150px;
+    width: auto;
+    height: auto;
     border: 1px solid #800;
     display: inline-block;
     overflow: hidden;
     position: relative;
+    line-height: 0;
   }
 
-  .board-avatar-container img.board-avatar {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  img,
+  video {
+    max-width: 150px;
+    max-height: 150px;
   }
 
   .offline-indicator {

src/components/views/Home.jsx

@@ -18,6 +18,7 @@ const RecentThread = ({ commentCid }) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress });
   const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state);
   const commentMediaInfo = getCommentMediaInfo(comment);
+  const fallbackImgUrl = 'assets/filedeleted-res.gif';
   const isMediaShowed =
     comment.link &&
     commentMediaInfo &&
@@ -30,7 +31,7 @@ const RecentThread = ({ commentCid }) => {
 
   return (
     <>
-      {isMediaShowed ? (
+      {isMediaShowed && comment.replyCount > 0 ? (
         <div className='board'>
           <div className='board-title' key='board-title'>
             <span>{subplebbit.title || subplebbit.address}</span>
@@ -50,7 +51,14 @@ const RecentThread = ({ commentCid }) => {
               ) : commentMediaInfo?.type === 'image' ? (
                 <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
               ) : commentMediaInfo?.type === 'video' ? (
-                <video className='board-avatar' src={commentMediaInfo?.url} alt='post' />
+                <video
+                  className='board-avatar'
+                  src={commentMediaInfo?.url}
+                  onError={(e) => {
+                    e.target.src = fallbackImgUrl;
+                  }}
+                  alt='post'
+                />
               ) : commentMediaInfo?.type === 'iframe' ? (
                 <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
               ) : (
@@ -61,7 +69,7 @@ const RecentThread = ({ commentCid }) => {
           </div>
           <div className='board-text' key='bt'>
             {comment?.title ? <b>{comment?.title}</b> : null}
-            {comment?.content ? `: ${comment.content}` : null}
+            {comment?.content ? (comment.content.length > 99 ? `: ${comment.content.substring(0, 99)}...` : `: ${comment.content}`) : null}
           </div>
         </div>
       ) : null}
@@ -322,7 +330,7 @@ const Home = () => {
           </BoardsBox>
           <BoardsBox>
             <div className='boxbar'>
-              <h2>Recent Threads</h2>
+              <h2>Popular Threads</h2>
             </div>
             <BoardsContent>
               {sfwListCids.map((cid) => (