From 276830b275006bba2a1eb34b6351e29012b416d1 Mon Sep 17 00:00:00 2001
From: Daniil Fadeev <shameondev@gmail.com>
Date: Thu, 10 Aug 2023 15:07:22 +0300
Subject: [PATCH] left_sidebar: Fix the layout for filter names that are long.

---
 web/styles/left_sidebar.css    | 14 +++++++++++++-
 web/templates/left_sidebar.hbs | 24 ++++++++++++------------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index f795a3857d..b9326000c6 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -448,6 +448,19 @@ li.active-sub-filter {
 #global_filters {
     margin-bottom: $sections_vertical_gutter;
 
+    .global-filter-container {
+        display: flex;
+        padding-right: 20px;
+
+        .global-filter-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            flex-grow: 1;
+        }
+    }
+
     .filter-icon {
         display: inline-block;
         min-width: $left_col_size;
@@ -455,7 +468,6 @@ li.active-sub-filter {
     }
 
     .top_left_row .unread_count {
-        margin-right: 20px;
         margin-top: 2px;
         display: none;
     }
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index 7ccb7c5a64..10250ca533 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -3,64 +3,64 @@
         <ul id="global_filters" class="filters">
             {{!-- Special-case this link so we don't actually go to page top. --}}
             <li class="top_left_all_messages top_left_row">
-                <a href="#all_messages" class="home-link tippy-left-sidebar-tooltip" data-tooltip-template-id="all-message-tooltip-template">
+                <a href="#all_messages" class="home-link tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="all-message-tooltip-template">
                     <span class="filter-icon">
                         <i class="fa fa-align-left" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'All messages' }}</span>
+                    <span class="global-filter-name">{{t 'All messages' }}</span>
                     <span class="unread_count"></span>
                 </a>
                 <span class="arrow all-messages-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_recent_topics top_left_row">
-                <a href="#recent" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template">
+                <a href="#recent" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="recent-conversations-tooltip-template">
                     <span class="filter-icon">
                         <i class="fa fa-clock-o" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'Recent conversations' }}</span>
+                    <span class="global-filter-name">{{t 'Recent conversations' }}</span>
                 </a>
             </li>
             <li class="top_left_mentions top_left_row hidden-for-spectators">
-                <a href="#narrow/is/mentioned">
+                <a class="global-filter-container" href="#narrow/is/mentioned">
                     <span class="filter-icon">
                         <i class="fa fa-at" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'Mentions' }}</span>
+                    <span class="global-filter-name">{{t 'Mentions' }}</span>
                     <span class="unread_count"></span>
                 </a>
             </li>
             <li class="top_left_starred_messages top_left_row hidden-for-spectators">
-                <a href="#narrow/is/starred">
+                <a class="global-filter-container" href="#narrow/is/starred">
                     <span class="filter-icon">
                         <i class="fa fa-star" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'Starred messages' }}</span>
+                    <span class="global-filter-name">{{t 'Starred messages' }}</span>
                     <span class="unread_count"></span>
                 </a>
                 <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_drafts top_left_row hidden-for-spectators">
-                <a href="#drafts" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template">
+                <a href="#drafts" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="drafts-tooltip-template">
                     <span class="filter-icon">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'Drafts' }}</span>
+                    <span class="global-filter-name">{{t 'Drafts' }}</span>
                     <span class="unread_count"></span>
                 </a>
                 <span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_scheduled_messages top_left_row hidden-for-spectators">
-                <a href="#scheduled">
+                <a class="global-filter-container" href="#scheduled">
                     <span class="filter-icon">
                         <i class="fa fa-calendar" aria-hidden="true"></i>
                     </span>
                     {{~!-- squash whitespace --~}}
-                    <span>{{t 'Scheduled messages' }}</span>
+                    <span class="global-filter-name">{{t 'Scheduled messages' }}</span>
                     <span class="unread_count"></span>
                 </a>
             </li>