From c82012e5e206ed1294a47f005e114caaf2ccad6d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 17 Jul 2024 03:24:28 +0000
Subject: [PATCH] typeahead: Move all global typeahead styles together.

---
 web/styles/compose.css   | 26 -------------
 web/styles/typeahead.css | 79 ++++++++++++++++++++++++++++++++++++++++
 web/styles/zulip.css     | 57 -----------------------------
 3 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 89b49443e7..3ae8f13893 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1402,32 +1402,6 @@ textarea.new_message_textarea {
     }
 }
 
-.typeahead.dropdown-menu {
-    .typeahead-menu {
-        list-style: none;
-        margin: 4px 0;
-        max-height: min(248px, 95vh);
-        overflow-y: auto;
-
-        .simplebar-content {
-            min-width: max-content;
-        }
-    }
-
-    .typeahead-header {
-        margin: 0;
-        padding: 4px 10px;
-        border-top: 1px solid hsl(0deg 0% 0% / 20%);
-        display: flex;
-        align-items: center;
-    }
-
-    #typeahead-header-text {
-        color: var(--color-dropdown-item);
-        font-size: 12px;
-    }
-}
-
 /* Class for send-area buttons, such as
    Drafts and the send-adjacent vdots */
 .send-control-button {
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index d679de7328..f27938e910 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -15,6 +15,8 @@
 }
 
 .typeahead.dropdown-menu .typeahead-menu .simplebar-content {
+    min-width: max-content;
+
     & > li {
         word-break: break-word;
 
@@ -97,3 +99,80 @@
         opacity: 1;
     }
 }
+
+.typeahead.dropdown-menu {
+    .typeahead-menu {
+        list-style: none;
+        margin: 4px 0;
+        max-height: min(248px, 95vh);
+        overflow-y: auto;
+    }
+
+    .typeahead-header {
+        margin: 0;
+        padding: 4px 10px;
+        border-top: 1px solid hsl(0deg 0% 0% / 20%);
+        display: flex;
+        align-items: center;
+    }
+
+    #typeahead-header-text {
+        color: var(--color-dropdown-item);
+        font-size: 12px;
+    }
+
+    a strong.typeahead-strong-section {
+        white-space: pre;
+        /* Present as flexbox to better control
+           icon alignment and spacing, when icons
+           are shown. */
+        display: flex;
+        align-items: baseline;
+        /* Approximate space as preserved in
+           typeahead lines, e.g., between the channel
+           name and its description. */
+        gap: 0.25ch;
+    }
+
+    .active {
+        .unsubscribed_icon {
+            visibility: visible;
+            float: right;
+            margin-top: 5px;
+            color: hsl(96deg 7% 73%);
+        }
+    }
+
+    .unsubscribed_icon {
+        visibility: hidden;
+        font-size: 0.8em;
+    }
+}
+
+.typeahead-option-label {
+    display: flex !important;
+    justify-content: space-between;
+
+    > strong {
+        margin-right: 14px;
+    }
+}
+
+.typeahead-image {
+    display: inline-block;
+    height: 21px;
+    width: 21px;
+    border-radius: 4px;
+
+    /* For FontAwesome icons and zulip icons used in place of images for some users. */
+    font-size: 19px;
+    text-align: center;
+
+    &.zulip-icon-triple-users {
+        font-size: 19px;
+    }
+
+    &.no-presence-circle {
+        margin-left: 14px;
+    }
+}
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 995f1be984..0d1c23f4ca 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1266,54 +1266,6 @@ div.focused-message-list {
     font-size: 0;
 }
 
-.typeahead.dropdown-menu {
-    a strong.typeahead-strong-section {
-        white-space: pre;
-        /* Present as flexbox to better control
-           icon alignment and spacing, when icons
-           are shown. */
-        display: flex;
-        align-items: baseline;
-        /* Approximate space as preserved in
-           typeahead lines, e.g., between the channel
-           name and its description. */
-        gap: 0.25ch;
-    }
-
-    .active {
-        .unsubscribed_icon {
-            visibility: visible;
-            float: right;
-            margin-top: 5px;
-            color: hsl(96deg 7% 73%);
-        }
-    }
-
-    .unsubscribed_icon {
-        visibility: hidden;
-        font-size: 0.8em;
-    }
-}
-
-.typeahead-image {
-    display: inline-block;
-    height: 21px;
-    width: 21px;
-    border-radius: 4px;
-
-    /* For FontAwesome icons and zulip icons used in place of images for some users. */
-    font-size: 19px;
-    text-align: center;
-
-    &.zulip-icon-triple-users {
-        font-size: 19px;
-    }
-
-    &.no-presence-circle {
-        margin-left: 14px;
-    }
-}
-
 nav {
     .column-left {
         text-align: left;
@@ -2223,15 +2175,6 @@ body:not(.hide-left-sidebar) {
     }
 }
 
-.typeahead-option-label {
-    display: flex !important;
-    justify-content: space-between;
-
-    > strong {
-        margin-right: 14px;
-    }
-}
-
 .header-main .column-right {
     display: flex;
     /* Make the top navbar right column its full width,