From e5e5ba6cea4747b1f5906ec4751facad72a49324 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 10 Jul 2024 11:31:02 +0000
Subject: [PATCH] css: Scale typeaheads / dropdowns with font size.

Fixes #30780

Adjusted both width and line height of typeaheads and dropdown widgets
to scale font size.
---
 web/styles/popovers.css  |  2 +-
 web/styles/typeahead.css |  9 ++++++++-
 web/styles/zulip.css     | 11 ++++++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 6de8a2bf0c..99573e7bff 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -75,7 +75,7 @@
         0 2px 4px hsl(0deg 0% 0% / 10%);
 
     .tippy-content {
-        font-size: 14px;
+        font-size: var(--base-font-size-px);
         color: hsl(0deg 0% 75%);
         padding: 0;
     }
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index 6c5195545f..2db18d1de6 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -25,10 +25,16 @@
             font-weight: normal;
             /* We want to keep this `max-width` less than 320px. */
             max-width: 292px;
-            line-height: 20px;
+            line-height: var(--base-line-height-unitless);
             color: var(--color-dropdown-item);
             white-space: nowrap;
 
+            @media (width >= $ml_min) {
+                /* Scale up with font size on larger widths. */
+                /* 292px / 14px */
+                max-width: 20.86em;
+            }
+
             /* hidden text just to maintain line height for a blank option */
             strong:empty {
                 &::after {
@@ -77,6 +83,7 @@
     }
 
     .autocomplete_secondary {
+        align-self: center;
         opacity: 0.8;
         font-size: 85%;
         flex: 1 1 0;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e9e6d516ea..e91001b644 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2156,7 +2156,8 @@ body:not(.hide-left-sidebar) {
     .dropdown-list-wrapper {
         /* Sync with `max-height` in dropdown_widget. */
         max-height: 210px;
-        min-width: 200px;
+        /* 200px/14px */
+        min-width: 14.285em;
 
         .dropdown-list {
             list-style: none;
@@ -2189,13 +2190,13 @@ body:not(.hide-left-sidebar) {
     padding: 3px 10px 3px 8px;
     gap: 4px;
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--base-line-height-unitless);
     white-space: normal;
 
     .stream-privacy-type-icon {
-        font-size: 13px;
-        width: 13px;
-        height: 13px;
+        font-size: 0.93em;
+        width: 0.93em;
+        height: 0.93em;
         padding-right: 2px;
     }