From 7cb00d171e1338c164f29a9339903f7fcf8cd60b Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Wed, 10 Jul 2024 15:26:58 -0700
Subject: [PATCH] search pills: Prevent overflow for very long pills.

---
 web/styles/input_pill.css |  1 +
 web/styles/search.css     | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 760987215d..b448cc255e 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -35,6 +35,7 @@
         .pill-image {
             height: var(--length-input-pill-image);
             width: var(--length-input-pill-image);
+            min-width: var(--length-input-pill-image);
             border-radius: 4px 0 0 4px;
         }
 
diff --git a/web/styles/search.css b/web/styles/search.css
index 37cf06001b..6920098e9a 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -223,7 +223,7 @@
                 var(--search-box-height),
                 auto
             )
-            / auto minmax(0, 1fr) auto;
+            / auto minmax(0, 1fr) 28px;
         align-items: start;
         cursor: pointer;
 
@@ -244,7 +244,6 @@
         }
 
         .user-pill-container {
-            min-width: fit-content;
             gap: 5px;
 
             > .pill-label {
@@ -259,6 +258,9 @@
                 height: var(--height-input-pill);
                 border: none;
                 border-radius: 3px;
+                max-width: none;
+                display: grid;
+                grid-template-columns: auto 1fr auto;
 
                 &:not(.deactivated-pill) {
                     background-color: var(--color-background-user-pill);
@@ -267,6 +269,10 @@
         }
     }
 
+    .pill-label {
+        min-width: 30px;
+    }
+
     @media (width >= $md_min) {
         .navbar-search {
             background: var(--color-background-search);