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 {