From 0844e2cba94ae3fbe885c6b8d83955ab19e5d05e Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 19 Jun 2024 11:16:38 -0400
Subject: [PATCH] pills: Size pill components and inputs in ems.

---
 web/styles/app_variables.css |  5 +++++
 web/styles/input_pill.css    | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 53afd0ab0a..a3f349011b 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -200,6 +200,11 @@
        We expect `resize.ts` to update this once UI is initialized. */
     --recent-topics-filters-height: 50px;
 
+    /* Pill dimensions. */
+    /* 1.4286em is 20px at 14px/1em */
+    --height-input-pill: 1.4286em;
+    --length-input-pill-image: var(--height-input-pill);
+
     /* Overlay heights for streams modal */
     --overlay-container-height: 95vh;
     --overlay-container-max-height: 1000px;
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 38d26298bf..a34ab3d43d 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -16,7 +16,7 @@
         max-width: 100%;
         min-width: 0;
 
-        height: 20px;
+        height: var(--height-input-pill);
         margin: 1px 2px;
 
         color: inherit;
@@ -32,8 +32,8 @@
         }
 
         .pill-image {
-            height: 20px;
-            width: 20px;
+            height: var(--length-input-pill-image);
+            width: var(--length-input-pill-image);
             border-radius: 4px 0 0 4px;
         }
 
@@ -137,7 +137,10 @@
 
     .input {
         display: inline-block;
-        padding: 2px 4px;
+        /* This keeps the input sized to
+           the same height as pills. */
+        line-height: var(--height-input-pill);
+        padding: 0 4px;
 
         min-width: 2px;
         word-break: break-all;