From 9a4c5bc1a038de8bbe58b09673491ce7ab798ad2 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Mon, 6 Jan 2025 11:41:35 -0800
Subject: [PATCH] recent: Use em for recent view filter widget width.

---
 web/styles/inbox.css       | 14 +++++++-------
 web/styles/recent_view.css |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/styles/inbox.css b/web/styles/inbox.css
index 826713f97a..557cbae601 100644
--- a/web/styles/inbox.css
+++ b/web/styles/inbox.css
@@ -61,15 +61,15 @@
                 align-items: center;
                 border-radius: 2px;
                 cursor: pointer;
-                font-size: 16px;
+                font-size: 1.1428em; /* 16px at 14px em */
                 color: var(--color-icons-inbox);
                 opacity: 0.4;
                 transition: none 140ms;
                 transition-property: background-color, opacity, transform;
                 padding: 5px;
                 margin: 0;
-                /* = -Width of the button. */
-                margin-right: -28px;
+                /* = -Width of the button, 28px at 14px em */
+                margin-right: -2em;
                 position: relative;
                 top: 0;
                 right: 30px;
@@ -103,8 +103,8 @@
             height: var(--height-inbox-search);
             /* top/bottom default 1px padding / 14px em */
             /* left padding 30px / 14px em */
-            /* right padding for 28px icon */
-            padding: 0.0714em 28px 0.0714em 2.1428em;
+            /* right padding for 28px / 14px em (close icon) */
+            padding: 0.0714em 2em 0.0714em 2.1428em;
             font-style: normal;
             font-weight: 400;
             line-height: 1.2142em; /* 17px / 14px em */
@@ -136,10 +136,10 @@
             border-radius: 5px;
             border: 1px solid hsl(0deg 0% 0% / 20%);
             margin-bottom: var(--max-unmaximized-compose-height);
-            /* margin(5) + search left padding(30) + search right padding (28) = 63px */
+            /* margin(5) + search left padding(30) + search right padding (28) = 63px at 14px em */
             max-width: calc(
                 var(--width-inbox-search) +
-                    var(--width-inbox-filters-dropdown) + 63px
+                    var(--width-inbox-filters-dropdown) + 4.5em
             );
 
             .inbox-focus-border {
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index 14596cb01a..654712ad6f 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -581,7 +581,7 @@
 
 #recent-view-filter_widget {
     display: inline-flex;
-    width: 150px;
+    width: 10.7142em; /* 150px at 14px em */
     /* Legacy 5px 10px at 14px/1em. */
     margin: 0 0.3571em 0.7142em 0;