diff --git a/web/styles/search.css b/web/styles/search.css
index af859b764a..5d5b14e911 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -69,7 +69,7 @@
         }
 
         #searchbox-input-container {
-            width: 150px;
+            width: var(--search-box-width);
         }
 
         .search-input {
@@ -95,12 +95,6 @@
         }
 
         @media (width < $md_min) {
-            #searchbox-input-container {
-                /* On small screens, the input container/button becomes just
-                   an icon. Width is to match the width of nearby buttons. */
-                width: 40px;
-            }
-
             .search-input {
                 opacity: 0;
             }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 26c4f1287a..3a359d3174 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -63,11 +63,16 @@ body {
     the height of its parent (i.e. the header height).
     */
     --search-box-height: 28px;
+    --search-box-width: 150px;
 
     @media (width < $sm_min) {
         --search-box-height: var(--header-height);
     }
 
+    @media (width < $md_min) {
+        --search-box-width: 40px;
+    }
+
     /*
     Since #navbar_alerts_wrapper can take variable height depending upon
     window width / language, we sync its height in navbar_alerts.js