From 6a7d4d96c5e6edf1acedea4cf0fe0cdbe3b4dbad Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulip.com>
Date: Fri, 11 Jun 2021 16:18:16 -0700
Subject: [PATCH] settings: Fix size of dropdown_list_widget elements.

We remove the small CSS class, which set the font size as something
tiny, and also restructure it with a fixed height and more natural
markup for the reset link.
---
 static/styles/settings.css                    | 26 ++++++++++++-------
 .../settings/dropdown_list_widget.hbs         |  8 +++---
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/static/styles/settings.css b/static/styles/settings.css
index ac128555f6..2895358709 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -1611,21 +1611,29 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
 .dropdown-list-widget {
     button {
         margin: 0 5px;
-
-        &.dropdown_list_reset_button {
-            /* Prevent night mode from overriding background. */
-            background: unset !important;
-            border: none;
-
-            &:disabled {
-                display: none;
-            }
+        &.dropdown-toggle {
+            /* Matches bootstrap hardcoded 30px height for select elements,
+               which we want to match the size of. */
+            height: 30px;
+            padding: 0;
         }
+
         &:disabled i {
             display: none;
         }
     }
 
+    a.dropdown_list_reset_button {
+        /* Prevent night mode from overriding background. */
+        background: unset !important;
+        border: none;
+        margin-left: 10px;
+
+        &:disabled {
+            display: none;
+        }
+    }
+
     .dropdown-search > input[type="text"] {
         margin: 9px;
     }
diff --git a/static/templates/settings/dropdown_list_widget.hbs b/static/templates/settings/dropdown_list_widget.hbs
index 9c67f8a0f0..e26f54c820 100644
--- a/static/templates/settings/dropdown_list_widget.hbs
+++ b/static/templates/settings/dropdown_list_widget.hbs
@@ -5,7 +5,7 @@
             {{ label }}
         </label>
         {{/if}}
-        <button class="button small rounded dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="button rounded dropdown-toggle" type="button" data-toggle="dropdown">
             <span id="{{widget_name}}_name"></span>
             <i class="fa fa-pencil"></i>
         </button>
@@ -19,8 +19,8 @@
         </ul>
     </span>
     {{#if reset_button_text}}
-    <button class="button small dropdown_list_reset_button" type="button">
-        <a>{{reset_button_text}}</a>
-    </button>
+    <a class="dropdown_list_reset_button" role="button">
+        {{reset_button_text}}
+    </a>
     {{/if}}
 </div>