From 1555e99abeafa22dc1ddbf9b8ea56112e51c090e Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Fri, 6 Dec 2024 13:20:27 +0530
Subject: [PATCH] settings: Use grid layout for search in stream and groups UI.

This commit updates the search input to in stream and groups
UI to use grid layout. This also helps in fixing the alignment
of the "x" button.
---
 web/styles/subscriptions.css | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 6e8204b1c9..ad9b38f145 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -513,11 +513,7 @@ h4.user_group_setting_subsection_title {
 
 #search_stream_name,
 #search_group_name {
-    width: 100%;
     padding: 3px 5px;
-    margin: 8px 0;
-    margin-left: 10px;
-    margin-right: -15px !important;
     display: inline-block;
     border-radius: 5px;
     box-shadow: none;
@@ -525,16 +521,15 @@ h4.user_group_setting_subsection_title {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    grid-column: search-input-start / clear-search-end;
+    grid-row: search-input;
 }
 
 .stream_name_search_section,
 .group_name_search_section {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin-bottom: 0;
-    height: auto;
+    padding: 8px 10px;
+    display: grid;
+    grid-template: "search-input clear-search" auto / minmax(0, 1fr) 30px;
     border-bottom: 1px solid var(--color-border-modal-bar);
 }
 
@@ -549,8 +544,9 @@ h4.user_group_setting_subsection_title {
 
 #clear_search_stream_name,
 #clear_search_group_name {
-    right: 5px !important;
-    margin-left: -1px;
+    grid-area: clear-search;
+    right: 0;
+    padding: 0;
 }
 
 #search_stream_name:placeholder-shown + #clear_search_stream_name {