From ebdcbc28f6a20f3f62f6b3eb5798c7628db94957 Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Thu, 13 Jul 2023 12:04:22 -0400
Subject: [PATCH] search: Wrap long search suggestions.

CZO conversation: https://chat.zulip.org/#narrow/stream/101-design/topic/long.20search.20suggestions

This commit also changes some styling for the pills,
to ensure that they are properly aligned when search
results wrap.
---
 web/styles/search.css | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/web/styles/search.css b/web/styles/search.css
index 9facf7b98f..af859b764a 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -235,14 +235,26 @@
 
     .typeahead-menu li a {
         padding: 3px 30px;
-
-        .search_list_item {
-            display: flex;
-            align-items: center;
-        }
+        /* Override white-space: nowrap from zulip.css */
+        white-space: normal;
 
         .search_list_item .pill-container {
             margin-left: 5px;
         }
     }
+
+    .pill {
+        align-items: baseline;
+    }
+
+    .pill-image {
+        /* Add line-height equal to height to mimic baseline alignment. */
+        line-height: 20px;
+        align-self: center;
+    }
+
+    /* Break really long words (unlikely to happen). */
+    .search_list_item span {
+        word-break: break-word;
+    }
 }