diff --git a/src/components/styled/views/Home.styled.jsx b/src/components/styled/views/Home.styled.jsx index 6903f681..92d81fc1 100644 --- a/src/components/styled/views/Home.styled.jsx +++ b/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 { diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx index 06096473..6d67bce7 100644 --- a/src/components/views/Home.jsx +++ b/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 ? (
{subplebbit.title || subplebbit.address} @@ -50,7 +51,14 @@ const RecentThread = ({ commentCid }) => { ) : commentMediaInfo?.type === 'image' ? ( post ) : commentMediaInfo?.type === 'video' ? ( -
{comment?.title ? {comment?.title} : null} - {comment?.content ? `: ${comment.content}` : null} + {comment?.content ? (comment.content.length > 99 ? `: ${comment.content.substring(0, 99)}...` : `: ${comment.content}`) : null}
) : null} @@ -322,7 +330,7 @@ const Home = () => {
-

Recent Threads

+

Popular Threads

{sfwListCids.map((cid) => (