From 7e65d8be5d154aa1d39ab21825f1480031c3ad15 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 19 Feb 2023 01:10:06 +0800
Subject: [PATCH] Make smaller statuses stand out in the carousel

---
 src/app.css                 |  9 +++++++++
 src/components/status.jsx   | 10 ++++++++--
 src/components/timeline.jsx |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6278357d..0ee21b03 100644
--- a/src/app.css
+++ b/src/app.css
@@ -614,6 +614,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   counter-increment: index;
   position: relative;
 }
+.status-carousel .content-container .content:only-child {
+  font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
+}
+.status-carousel
+  .content-container[style*='content-text-weight:1']
+  .media-container.media-eq1 {
+  /* LOL, this is madness, reading a value from the style attribute */
+  height: auto;
+}
 .status-carousel.boosts-carousel {
   --carousel-color: var(--reblog-color);
   --carousel-faded-color: var(--reblog-faded-color);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a85ad1ed..046725f8 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -43,6 +43,7 @@ function Status({
   size = 'm',
   skeleton,
   readOnly,
+  contentTextWeight,
 }) {
   if (skeleton) {
     return (
@@ -160,7 +161,12 @@ function Status({
           <NameText account={status.account} instance={instance} showAvatar />{' '}
           boosted
         </div>
-        <Status status={reblog} instance={instance} size={size} />
+        <Status
+          status={reblog}
+          instance={instance}
+          size={size}
+          contentTextWeight={contentTextWeight}
+        />
       </div>
     );
   }
@@ -320,7 +326,7 @@ function Status({
             spoilerText || sensitive ? 'has-spoiler' : ''
           } ${showSpoiler ? 'show-spoiler' : ''}`}
           style={
-            size === 'l' && {
+            (size === 'l' || contentTextWeight) && {
               '--content-text-weight':
                 Math.round(
                   (spoilerText.length + htmlContentLength(content)) / 140,
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 4ea25034..6692368e 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -325,12 +325,14 @@ function Timeline({
                                     statusID={statusID}
                                     instance={instance}
                                     size="s"
+                                    contentTextWeight
                                   />
                                 ) : (
                                   <Status
                                     status={item}
                                     instance={instance}
                                     size="s"
+                                    contentTextWeight
                                   />
                                 )}
                               </Link>