From cb04659ab1d0378261c142815ca9ba63f25dedc3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 25 Sep 2023 10:20:32 +0800
Subject: [PATCH] Allow filters for posts in carousels

---
 README.md                   | 2 +-
 src/app.css                 | 1 +
 src/components/status.css   | 4 ++++
 src/components/timeline.jsx | 2 ++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f3469c05..c3218004 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ Everything is designed and engineered following my taste and vision. This is a p
   - Content can be partially revealed by hovering over the post, with tooltip showing the post text.
   - Clicking it will open the Post page.
   - Long-pressing or right-clicking it will "peek" the post with a bottom sheet UI.
-  - On boosts carousel, they are not partially hidden, but sorted to the end of the carousel.
+  - On boosts carousel, they are sorted to the end of the carousel.
 
 ## Development
 
diff --git a/src/app.css b/src/app.css
index 46b9eabb..afd4d5c9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -788,6 +788,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   gap: 16px;
   align-items: flex-start;
   counter-reset: index;
+  min-height: 160px;
 }
 .status-carousel > ul > li {
   scroll-snap-align: center;
diff --git a/src/components/status.css b/src/components/status.css
index 1f9b8b63..d89363e0 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -211,6 +211,10 @@
   display: flex;
   gap: 8px;
   align-items: center;
+
+  .status-carousel & {
+    padding: 16px 16px 16px 24px;
+  }
 }
 .status.filtered .status-filtered-info {
   pointer-events: none;
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index f832153d..b35c26ab 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -385,6 +385,7 @@ function Timeline({
                                       instance={instance}
                                       size="s"
                                       contentTextWeight
+                                      allowFilters={allowFilters}
                                     />
                                   ) : (
                                     <Status
@@ -392,6 +393,7 @@ function Timeline({
                                       instance={instance}
                                       size="s"
                                       contentTextWeight
+                                      allowFilters={allowFilters}
                                     />
                                   )}
                                 </Link>