From 01c90150a818f113387b3f3619a97d224a4d622c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 28 Sep 2023 19:46:44 +0800
Subject: [PATCH] Allow show more figcaption

---
 src/components/media.jsx  |  8 ++++++++
 src/components/status.css | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index bab23396..d2c6c498 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -48,6 +48,8 @@ const AltBadge = (props) => {
   );
 };
 
+const MEDIA_CAPTION_LIMIT = 140;
+
 function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
   const {
     blurhash,
@@ -371,11 +373,17 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
         </Parent>
         {showInlineDesc && (
           <figcaption
+            class={`media-caption media-caption-${
+              description.length <= MEDIA_CAPTION_LIMIT ? 'short' : 'long'
+            }`}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
               states.showMediaAlt = description;
             }}
+            title={
+              description.length > MEDIA_CAPTION_LIMIT ? description : undefined
+            }
           >
             {description}
           </figcaption>
diff --git a/src/components/status.css b/src/components/status.css
index c1a4ee7a..1fc920f6 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -714,16 +714,19 @@
       padding: 0 4px;
       font-size: 90%;
       color: var(--text-insignificant-color);
-      overflow: hidden;
-      white-space: normal;
-      display: -webkit-box;
-      display: box;
-      -webkit-box-orient: vertical;
-      box-orient: vertical;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
       line-height: 1.2;
       cursor: pointer;
+
+      &.media-caption-long {
+        overflow: hidden;
+        white-space: normal;
+        display: -webkit-box;
+        display: box;
+        -webkit-box-orient: vertical;
+        box-orient: vertical;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+      }
     }
   }