From d655ab857075418d34d4bb62caee6079ee8a2b94 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Tue, 25 Jun 2024 12:58:40 -0700
Subject: [PATCH] search pills: Rework pills sizes and layout.

---
 web/styles/search.css | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/web/styles/search.css b/web/styles/search.css
index 457ee5c604..4dfb2f521e 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -222,7 +222,6 @@
         .pill {
             margin: 0;
             min-width: unset;
-            height: 26px;
         }
 
         &:not(.focused) {
@@ -236,30 +235,26 @@
         }
 
         .user-pill-container {
-            padding: 2px;
-            height: 22px;
             min-width: fit-content;
+            gap: 5px;
 
             > .pill-label {
                 min-width: fit-content;
                 white-space: nowrap;
                 width: fit-content;
+                /* Replaced by the 5px gap. */
+                margin-right: 0;
             }
 
             .pill {
-                height: 22px;
-                margin: 2px;
+                height: var(--height-input-pill);
                 border: none;
+                border-radius: 3px;
 
                 &:not(.deactivated-pill) {
                     background-color: var(--color-background-user-pill);
                 }
             }
-
-            .pill-image {
-                width: 22px;
-                height: 22px;
-            }
         }
     }
 
@@ -345,7 +340,7 @@
 
         .pill-image {
             /* Add line-height equal to height to mimic baseline alignment. */
-            line-height: 20px;
+            line-height: var(--length-input-pill-image);
             align-self: center;
         }
     }