From b8ec7d3c51db3087147a520b0640fc154d6ba501 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 22 Mar 2023 12:26:28 +0800
Subject: [PATCH] Show small hints of filter titles

---
 src/components/status.css | 27 ++++++++++++++++++++++++++-
 src/components/status.jsx |  5 +++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index feaae368..f7bff63f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -245,7 +245,6 @@
 }
 .status-filtered-badge {
   flex-shrink: 0;
-  display: inline-block;
   color: var(--text-insignificant-color);
   /* background: var(--bg-faded-color); */
   /* border: var(--hairline-width) solid var(--bg-color); */
@@ -257,6 +256,15 @@
   text-transform: uppercase;
   font-weight: bold;
   vertical-align: middle;
+  display: inline-block;
+}
+.status-filtered-badge.badge-meta {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  top: calc((9px + 2px) / 2 * -1);
+  min-width: 50px;
+  text-align: center;
 }
 .status-filtered-badge.clickable:hover {
   cursor: pointer;
@@ -264,6 +272,23 @@
   border-color: var(--text-color);
   background: var(--bg-color);
 }
+.status-filtered-badge.badge-meta > span:first-child {
+  white-space: nowrap;
+}
+.status-filtered-badge.badge-meta > span + span {
+  display: block;
+  font-size: 9px;
+  font-weight: normal;
+  text-transform: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  top: calc(100% + 2px);
+  left: 0;
+  text-align: center;
+}
 
 .status.large .content-container {
   margin-left: calc(-50px - 16px);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index c7c9b736..4a0e9542 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1735,14 +1735,15 @@ function FilteredStatus({ status, filterInfo, instance }) {
     >
       <article class="status filtered" tabindex="-1">
         <b
-          class="status-filtered-badge clickable"
+          class="status-filtered-badge clickable badge-meta"
           title={filterTitleStr}
           onClick={(e) => {
             e.preventDefault();
             setShowPeek(true);
           }}
         >
-          Filtered
+          <span>Filtered</span>
+          <span>{filterTitleStr}</span>
         </b>{' '}
         <Avatar url={avatarStatic || avatar} />
         <span class="status-filtered-info">