update catalog

src/components/catalog-row/catalog-row.module.css

@@ -13,7 +13,11 @@
   padding: 10px 0 3px 0;
   vertical-align: top;
   display: inline-block;
+}
+
+.postContent {
   overflow: hidden;
+  max-height: 155px;
 }
 
 .large {
@@ -146,3 +150,14 @@
 .postPreview .capcode {
   color: var(--catalog-post-preview-author-capcode-color);
 }
+
+.xmasHat {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  left: -10px;
+  margin-top: -55px;
+  z-index: 999;
+  box-shadow: none !important;
+}

src/components/catalog-row/catalog-row.tsx

@@ -19,6 +19,7 @@ import styles from './catalog-row.module.css';
 import _ from 'lodash';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
+import { shouldShowSnow } from '../../lib/snow';
 
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
@@ -228,6 +229,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <span className={styles.hiddenThumbnail} />
             </Link>
           ) : hasThumbnail ? (
+            <>
+              {shouldShowSnow() && hasThumbnail && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} alt='' />}
               <Link to={postLink}>
                 <div
                   className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
@@ -249,6 +252,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
                   )}
                 </div>
               </Link>
+            </>
           ) : (
             threadIcons
           )}
@@ -264,7 +268,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <PostMenuDesktop post={post} />
             </span>
           </div>
-          {(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}
+          <div className={styles.postContent}>{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}</div>
         </div>
       </div>
       {(hoveredCid === cid || isDescription) &&