From 24e71acf3f8be166083505b819c8c4d3c04694a9 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 9 Sep 2021 11:01:56 -0400
Subject: [PATCH] UX: Normalize sizing for inputs, buttons, dropdowns (#14226)

See PR for details
---
 .../components/screened-ip-address-form.js    |  2 +-
 .../templates/components/permalink-form.hbs   | 57 +++++++------
 .../components/screened-ip-address-form.hbs   |  2 +-
 .../admin/addon/templates/email-index.hbs     | 33 ++++----
 .../addon/templates/email-preview-digest.hbs  | 83 ++++++++++---------
 .../admin/addon/templates/emojis.hbs          | 13 ++-
 .../templates/logs/screened-ip-addresses.hbs  |  6 +-
 .../templates/logs/staff-action-logs.hbs      | 10 +--
 .../app/templates/components/d-button.hbs     |  3 +
 .../app/templates/components/date-picker.hbs  |  3 +-
 .../components/edit-category-general.hbs      |  8 +-
 .../templates/components/emoji-uploader.hbs   |  8 +-
 .../components/future-date-input.hbs          |  4 +-
 .../discourse/app/templates/composer.hbs      |  2 +-
 .../discourse/app/templates/mobile/users.hbs  | 42 +++++-----
 .../app/templates/user/bookmarks.hbs          |  8 +-
 .../discourse/app/templates/users.hbs         |  6 +-
 .../discourse/tests/acceptance/group-test.js  |  2 +-
 .../tests/helpers/select-kit-helper.js        |  5 +-
 .../integration/components/input-size-test.js | 60 ++++++++++++++
 .../dropdown-select-box-header.hbs            |  2 +
 .../stylesheets/common/admin/admin_base.scss  | 36 +++-----
 .../common/admin/admin_emojis.scss            | 28 ++-----
 .../common/admin/admin_report.scss            |  5 --
 .../stylesheets/common/admin/customize.scss   | 17 +---
 .../stylesheets/common/admin/dashboard.scss   | 13 +--
 .../stylesheets/common/admin/emails.scss      | 12 ---
 .../stylesheets/common/admin/staff_logs.scss  | 78 +++--------------
 .../stylesheets/common/admin/suspend.scss     |  6 --
 .../stylesheets/common/base/_topic-list.scss  | 18 +---
 .../stylesheets/common/base/colorpicker.scss  | 11 ++-
 .../stylesheets/common/base/compose.scss      |  6 --
 .../stylesheets/common/base/directory.scss    | 17 +---
 .../stylesheets/common/base/discourse.scss    | 80 ++++++------------
 .../common/base/edit-topic-timer-modal.scss   | 30 -------
 .../stylesheets/common/base/reviewables.scss  | 12 ---
 .../stylesheets/common/base/share_link.scss   | 40 +--------
 .../common/components/bookmark-list.scss      | 16 ----
 .../common/components/buttons.scss            | 21 ++---
 .../common/components/date-input.scss         |  2 +-
 .../common/components/date-picker.scss        |  5 +-
 .../components/date-time-input-range.scss     |  6 +-
 .../common/components/date-time-input.scss    | 14 ++--
 .../common/components/ignored-user-list.scss  | 13 ---
 .../components/time-shortcut-picker.scss      |  5 --
 app/assets/stylesheets/common/d-editor.scss   | 10 ---
 .../stylesheets/common/foundation/base.scss   | 28 +++++++
 .../stylesheets/common/foundation/mixins.scss | 17 ++++
 .../common/foundation/variables.scss          |  3 -
 .../common/select-kit/combo-box.scss          |  5 +-
 .../select-kit/dropdown-select-box.scss       |  8 +-
 .../future-date-input-selector.scss           | 12 +++
 .../common/select-kit/multi-select.scss       |  7 +-
 .../common/select-kit/period-chooser.scss     | 18 ++--
 .../common/select-kit/select-kit.scss         | 10 ++-
 app/assets/stylesheets/desktop/discourse.scss |  5 +-
 app/assets/stylesheets/mobile/_index.scss     |  1 -
 .../stylesheets/mobile/admin_emojis.scss      | 35 --------
 app/assets/stylesheets/mobile/compose.scss    | 10 +++
 app/assets/stylesheets/mobile/discourse.scss  | 21 +----
 .../stylesheets/common/poll-ui-builder.scss   | 23 -----
 .../poll/assets/stylesheets/common/poll.scss  |  6 --
 .../discourse/lib/dummy-data.js.es6           |  1 +
 .../templates/styleguide/atoms/02-buttons.hbs | 12 +--
 .../styleguide/atoms/05-input-fields.hbs      | 63 +++++++++++++-
 .../styleguide/atoms/date-time-inputs.hbs     | 20 ++++-
 .../templates/styleguide/atoms/dropdowns.hbs  |  4 +-
 .../styleguide/organisms/navigation.hbs       |  6 +-
 .../assets/stylesheets/styleguide.scss        |  3 +-
 69 files changed, 489 insertions(+), 689 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/input-size-test.js
 delete mode 100644 app/assets/stylesheets/mobile/admin_emojis.scss

diff --git a/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js b/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js
index 5636c302dbe47..95ed9edfe81d2 100644
--- a/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js
+++ b/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js
@@ -17,7 +17,7 @@ import { schedule } from "@ember/runloop";
 **/
 
 export default Component.extend({
-  classNames: ["screened-ip-address-form"],
+  classNames: ["screened-ip-address-form", "inline-form"],
   formSubmitted: false,
   actionName: "block",
 
diff --git a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
index 8792d78734c5c..938c77b0d8fdb 100644
--- a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
@@ -1,30 +1,35 @@
-<b>{{i18n "admin.permalink.form.label"}}</b>
+<div class="inline-form">
+  <label>{{i18n "admin.permalink.form.label"}}</label>
 
-{{text-field
-  value=url
-  disabled=formSubmitted
-  class="permalink-url"
-  placeholderKey="admin.permalink.url"
-  autocorrect="off"
-  autocapitalize="off"}}
+  {{text-field
+    value=url
+    disabled=formSubmitted
+    class="permalink-url"
+    placeholderKey="admin.permalink.url"
+    autocorrect="off"
+    autocapitalize="off"
+  }}
 
-{{combo-box
-  content=permalinkTypes
-  value=permalinkType
-  onChange=(action (mut permalinkType))
-  class="permalink-type"
-}}
+  {{combo-box
+    content=permalinkTypes
+    value=permalinkType
+    onChange=(action (mut permalinkType))
+    class="permalink-type"
+  }}
 
-{{text-field
-  value=permalink_type_value
-  disabled=formSubmitted
-  class="external-url"
-  placeholderKey=permalinkTypePlaceholder
-  autocorrect="off"
-  autocapitalize="off"}}
+  {{text-field
+    value=permalink_type_value
+    disabled=formSubmitted
+    class="external-url"
+    placeholderKey=permalinkTypePlaceholder
+    autocorrect="off"
+    autocapitalize="off"
+  }}
 
-{{d-button
-  class="btn-default"
-  action=(action "submit")
-  disabled=formSubmitted
-  label="admin.permalink.form.add"}}
+  {{d-button
+    class="btn-default"
+    action=(action "submit")
+    disabled=formSubmitted
+    label="admin.permalink.form.add"
+  }}
+</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs b/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
index 488c14fb5ff87..a78a6c82e1708 100644
--- a/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
@@ -1,4 +1,4 @@
-<b>{{i18n "admin.logs.screened_ips.form.label"}}</b>
+<label>{{i18n "admin.logs.screened_ips.form.label"}}</label>
 {{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
 
 {{combo-box
diff --git a/app/assets/javascripts/admin/addon/templates/email-index.hbs b/app/assets/javascripts/admin/addon/templates/email-index.hbs
index ddf914fee4855..4919b249e6f7e 100644
--- a/app/assets/javascripts/admin/addon/templates/email-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-index.hbs
@@ -16,21 +16,24 @@
 
 <form>
   <div class="admin-controls">
-    {{#if sendingEmail}}
-      <div class="controls">{{i18n "admin.email.sending_test"}}</div>
-    {{else}}
-      <div class="controls">
-        {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
+    <div class="controls">
+      <div class="inline-form">
+        {{#if sendingEmail}}
+          {{i18n "admin.email.sending_test"}}
+        {{else}}
+          {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
+          {{d-button
+            class="btn-primary"
+            action=(action "sendTestEmail")
+            disabled=sendTestEmailDisabled
+            label="admin.email.send_test"
+            type="submit"
+          }}
+          {{#if sentTestEmailMessage}}
+            <span class="result-message">{{sentTestEmailMessage}}</span>
+          {{/if}}
+        {{/if}}
       </div>
-      <div class="controls">
-        {{d-button
-          class="btn-primary"
-          action=(action "sendTestEmail")
-          disabled=sendTestEmailDisabled
-          label="admin.email.send_test"
-          type="submit"}}
-        {{#if sentTestEmailMessage}}<span class="result-message">{{sentTestEmailMessage}}</span>{{/if}}
-      </div>
-    {{/if}}
+    </div>
   </div>
 </form>
diff --git a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
index c93d048ba6dec..a4af09fb88106 100644
--- a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
@@ -2,32 +2,35 @@
 
 <div class="admin-controls email-preview">
   <div class="controls">
-    <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
-    {{date-picker-past value=lastSeen id="last-seen"}}
-    <label>{{i18n "admin.email.user"}}:</label>
-    {{email-group-user-chooser
-      value=username
-      onChange=(action "updateUsername")
-      options=(hash
-        maximum=1
-      )
-    }}
-    {{d-button
-      class="btn-primary digest-refresh-button"
-      action=(action "refresh")
-      label="admin.email.refresh"}}
-    <div class="toggle">
-      <label>{{i18n "admin.email.format"}}</label>
-      {{#if showHtml}}
-        <span>{{i18n "admin.email.html"}}</span>
-         |
-        <a href {{action "toggleShowHtml"}}>
-          {{i18n "admin.email.text"}}
-        </a>
-      {{else}}
-        <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
-        <span>{{i18n "admin.email.text"}}</span>
-      {{/if}}
+    <div class="inline-form">
+      <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
+      {{date-picker-past value=lastSeen id="last-seen"}}
+      <label>{{i18n "admin.email.user"}}:</label>
+      {{email-group-user-chooser
+        value=username
+        onChange=(action "updateUsername")
+        options=(hash
+          maximum=1
+        )
+      }}
+      {{d-button
+        class="btn-primary digest-refresh-button"
+        action=(action "refresh")
+        label="admin.email.refresh"
+      }}
+      <div class="toggle">
+        <label>{{i18n "admin.email.format"}}</label>
+        {{#if showHtml}}
+          <span>{{i18n "admin.email.html"}}</span>
+          |
+          <a href {{action "toggleShowHtml"}}>
+            {{i18n "admin.email.text"}}
+          </a>
+        {{else}}
+          <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
+          <span>{{i18n "admin.email.text"}}</span>
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -37,20 +40,22 @@
   <div class="email-preview-digest">
     {{#if showSendEmailForm}}
       <div class="controls">
-        {{#if sendingEmail}}
-          {{i18n "admin.email.sending_test"}}
-        {{else}}
-          <label>{{i18n "admin.email.send_digest_label"}}</label>
-          {{text-field value=email placeholderKey="admin.email.test_email_address"}}
-          {{d-button
-            class="btn-default"
-            action=(action "sendEmail")
-            disabled=sendEmailDisabled
-            label="admin.email.send_digest"}}
-          {{#if sentEmail}}
-            <span class="result-message">{{i18n "admin.email.sent_test"}}</span>
+        <div class="inline-form">
+          {{#if sendingEmail}}
+            {{i18n "admin.email.sending_test"}}
+          {{else}}
+            <label>{{i18n "admin.email.send_digest_label"}}</label>
+            {{text-field value=email placeholderKey="admin.email.test_email_address"}}
+            {{d-button
+              class="btn-default"
+              action=(action "sendEmail")
+              disabled=sendEmailDisabled
+              label="admin.email.send_digest"}}
+            {{#if sentEmail}}
+              <span class="result-message">{{i18n "admin.email.sent_test"}}</span>
+            {{/if}}
           {{/if}}
-        {{/if}}
+        </div>
       </div>
     {{/if}}
 
diff --git a/app/assets/javascripts/admin/addon/templates/emojis.hbs b/app/assets/javascripts/admin/addon/templates/emojis.hbs
index 63df5d99acd85..30189a573d1d0 100644
--- a/app/assets/javascripts/admin/addon/templates/emojis.hbs
+++ b/app/assets/javascripts/admin/addon/templates/emojis.hbs
@@ -16,7 +16,7 @@
         <tr>
           <th>{{i18n "admin.emoji.image"}}</th>
           <th>{{i18n "admin.emoji.name"}}</th>
-          <th>
+          <th colspan="2">
             {{combo-box
               value=filter
               content=sortingGroups
@@ -25,22 +25,21 @@
               onChange=(action "filterGroups")
             }}
           </th>
-          <th></th>
         </tr>
       </thead>
       <tbody>
         {{#each sortedEmojis as |e|}}
           <tr>
-            <th><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></th>
-            <th>:{{e.name}}:</th>
-            <th>{{e.group}}</th>
-            <th>
+            <td><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></td>
+            <td>:{{e.name}}:</td>
+            <td>{{e.group}}</td>
+            <td class="action">
               {{d-button
                 action=(action "destroyEmoji" e)
                 class="btn-danger"
                 icon="far-trash-alt"
               }}
-            </th>
+            </td>
           </tr>
         {{/each}}
       </tbody>
diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
index 2d256ce151f50..3da09f772d85e 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
@@ -1,7 +1,7 @@
 <p>{{i18n "admin.logs.screened_ips.description"}}</p>
 
 <div class="screened-ip-controls">
-  <div class="filter-screened-ip-address">
+  <div class="filter-screened-ip-address inline-form">
     {{text-field
       value=filter
       class="ip-address-input"
@@ -82,7 +82,9 @@
                   action=(action "save")
                   actionParam=item
                   label="admin.logs.save"}}
-                <a href {{action "cancel" item}}>{{i18n "cancel"}}</a>
+                <a href {{action "cancel" item}} class="cancel-action">
+                  {{i18n "cancel"}}
+                </a>
               {{else}}
                 {{d-button
                   class="btn-default btn-danger"
diff --git a/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
index 3996ac24697a3..807cdca6fc968 100644
--- a/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
@@ -1,29 +1,29 @@
 <div class="staff-action-logs-controls">
   {{#if filtersExists}}
     <div class="staff-action-logs-filters">
-      <a href {{action "clearAllFilters"}} class="clear-filters filter">
+      <a href {{action "clearAllFilters"}} class="clear-filters filter btn">
         <span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
       </a>
       {{#if actionFilter}}
-        <a href {{action "clearFilter" "actionFilter"}} class="filter">
+        <a href {{action "clearFilter" "actionFilter"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.action"}}</span>: {{actionFilter}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.acting_user}}
-        <a href {{action "clearFilter" "acting_user"}} class="filter">
+        <a href {{action "clearFilter" "acting_user"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{filters.acting_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.target_user}}
-        <a href {{action "clearFilter" "target_user"}} class="filter">
+        <a href {{action "clearFilter" "target_user"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{filters.target_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.subject}}
-        <a href {{action "clearFilter" "subject"}} class="filter">
+        <a href {{action "clearFilter" "subject"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{filters.subject}}
           {{d-icon "times-circle"}}
         </a>
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-button.hbs b/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
index 5771625740a94..8d5b383d01142 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
@@ -12,6 +12,9 @@
 
 {{~#if computedLabel~}}
   <span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span>
+{{~else~}}
+  &#8203;
+  {{! Zero-width space character, so icon-only button height = regular button height }}
 {{~/if~}}
 
 {{yield}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
index e29eb0e73af37..2d5466c0362f4 100644
--- a/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
@@ -2,4 +2,5 @@
   type=inputType
   class="date-picker"
   placeholder=placeholder
-  value=value}}
+  value=value
+}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
index 9bdf5744d41ff..ce5b09c68d07c 100644
--- a/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
@@ -61,21 +61,21 @@
       <div class="category-color-editor">
         {{html-safe categoryBadgePreview}}
 
-        <div style="margin-top: 10px;" class="input-prepend input-append">
+        <section class="field">
           <span class="color-title">{{i18n "category.background_color"}}:</span>
           <div class="colorpicker-wrapper">
             <span class="add-on">#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
             {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
           </div>
-        </div>
+        </section>
 
-        <div class="input-prepend input-append">
+        <section class="field">
           <span class="color-title">{{i18n "category.foreground_color"}}:</span>
           <div class="colorpicker-wrapper edit-text-color">
             <span class="add-on">#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
             {{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
           </div>
-        </div>
+        </section>
       </div>
     {{/if}}
   </section>
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
index 6839c6cb6f39f..a32fe3772ad7a 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
@@ -1,5 +1,5 @@
-<div class="emoji-uploader">
-  <div class="control">
+<div class="emoji-uploader form-horizontal">
+  <div class="control-group">
     <span class="label">
       {{i18n "admin.emoji.name"}}
     </span>
@@ -12,7 +12,7 @@
       }}
     </div>
   </div>
-  <div class="control">
+  <div class="control-group">
     <span class="label">
       {{i18n "admin.emoji.group"}}
     </span>
@@ -30,7 +30,7 @@
       }}
     </div>
   </div>
-  <div class="control">
+  <div class="control-group">
     <div class="input">
       <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
         {{#if uploading}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
index 68fdc11df9f65..5f3ee328b672f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
@@ -21,7 +21,7 @@
   </div>
 
   {{#if displayDateAndTimePicker}}
-    <div class="control-group">
+    <div class="control-group future-date-input-date-picker">
       {{d-icon "calendar-alt"}}
       {{date-picker-future
         value=_date
@@ -30,7 +30,7 @@
       }}
     </div>
 
-    <div class="control-group">
+    <div class="control-group future-date-input-time-picker">
       {{d-icon "far-clock"}}
       {{input
         placeholder="--:--"
diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index 4ca58d344310f..3ae8ef2ff9c44 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -12,7 +12,7 @@
       addLinkLookup=(action "addLinkLookup")
     }}
     {{#if model.viewOpenOrFullscreen}}
-      <div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags"}}">
+      <div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags" "without-tags"}}">
         <div class="composer-fields">
           {{plugin-outlet name="composer-open" args=(hash model=model)}}
           <div class="reply-to">
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
index f759c87551323..82750e522a59c 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/users.hbs
@@ -11,28 +11,28 @@
             {{lastUpdatedAt}}
           </div>
         {{/if}}
-        {{input
-          value=(readonly nameInput)
-          input=(action "onUsernameFilterChanged" value="target.value")
-          placeholderKey="directory.filter_name"
-          class="filter-name no-blur"
-        }}
-        {{combo-box
-          class="directory-group-selector"
-          value=group
-          content=groupOptions
-          onChange=(action groupChanged)
-          options=(hash
-            none="directory.group.all"
-          )
-        }}
-        {{#if currentUser.staff}}
-          {{d-button
-            icon="wrench"
-            action=(action "showEditColumnsModal")
-            class="btn-default open-edit-columns-btn"
+        <div class="inline-form full-width">
+          {{input
+            value=(readonly nameInput)
+            input=(action "onUsernameFilterChanged" value="target.value")
+            placeholderKey="directory.filter_name"
+            class="filter-name no-blur"
           }}
-        {{/if}}
+          {{combo-box
+            class="directory-group-selector"
+            value=group
+            content=groupOptions
+            onChange=(action groupChanged)
+            options=(hash none="directory.group.all")
+          }}
+          {{#if currentUser.staff}}
+            {{d-button
+              icon="wrench"
+              action=(action "showEditColumnsModal")
+              class="btn-default open-edit-columns-btn"
+            }}
+          {{/if}}
+        </div>
         {{plugin-outlet name="users-directory-controls" connectorTagName="" tagName="" args=(hash model=model)}}
       </div>
 
diff --git a/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs b/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
index fc689b849cdd2..214bf2aa4162a 100644
--- a/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
@@ -9,7 +9,7 @@
       </div>
     </div>
   {{else}}
-    <div class="form-horizontal bookmark-search-form">
+    <div class="inline-form full-width bookmark-search-form">
       {{input type="text"
         value=searchTerm
         placeholder=(i18n "bookmarks.search_placeholder")
@@ -19,7 +19,8 @@
         class="btn-primary"
         action=(action "search")
         type="button"
-        icon="search"}}
+        icon="search"
+      }}
     </div>
     {{#if nothingFound}}
       <div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div>
@@ -28,7 +29,8 @@
         loadMore=(action "loadMore")
         reload=(action "reload")
         loadingMore=loadingMore
-        content=content}}
+        content=content
+      }}
     {{/if}}
   {{/if}}
 {{/conditional-loading-spinner}}
diff --git a/app/assets/javascripts/discourse/app/templates/users.hbs b/app/assets/javascripts/discourse/app/templates/users.hbs
index 462bcedc55024..e6e8334515968 100644
--- a/app/assets/javascripts/discourse/app/templates/users.hbs
+++ b/app/assets/javascripts/discourse/app/templates/users.hbs
@@ -13,12 +13,12 @@
               </div>
             {{/if}}
           </div>
-          <div>
-            <span class="total-rows">
+          <div class="inline-form">
+            <label class="total-rows">
               {{#if model.totalRows}}
                 {{i18n "directory.total_rows" count=model.totalRows}}
               {{/if}}
-            </span>
+            </label>
             {{input
               value=(readonly nameInput)
               input=(action "onUsernameFilterChanged" value="target.value")
diff --git a/app/assets/javascripts/discourse/tests/acceptance/group-test.js b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
index d8197e6688da8..17d6d9de4ba62 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/group-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
@@ -191,7 +191,7 @@ acceptance("Group - Authenticated", function (needs) {
     await click(".group-index-request");
 
     assert.equal(
-      queryAll(".modal-header").text().trim(),
+      queryAll(".modal-header .title").text().trim(),
       I18n.t("groups.membership_request.title", { group_name: "Macdonald" })
     );
 
diff --git a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
index 6785b6e1c8561..e283466d67345 100644
--- a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
+++ b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
@@ -128,7 +128,10 @@ function headerHelper(header) {
       return header.attr("data-name");
     },
     label() {
-      return header.text().trim();
+      return header
+        .text()
+        .trim()
+        .replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
     },
     icon() {
       return header.find(".d-icon");
diff --git a/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js
new file mode 100644
index 0000000000000..16f23a907aa54
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js
@@ -0,0 +1,60 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+
+import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule(
+  "Integration | Component | consistent input/dropdown/button sizes",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    componentTest("icon only button, icon and text button, text only button", {
+      template: hbs`{{d-button icon="plus"}} {{d-button icon="plus" label="topic.create"}} {{d-button label="topic.create"}}`,
+
+      test(assert) {
+        assert.equal(
+          query(".btn:nth-child(1)").offsetHeight,
+          query(".btn:nth-child(2)").offsetHeight,
+          "have equal height"
+        );
+        assert.equal(
+          query(".btn:nth-child(1)").offsetHeight,
+          query(".btn:nth-child(3)").offsetHeight,
+          "have equal height"
+        );
+      },
+      // these tests fail on Firefox 78 in CI, skipping for now
+      skip: !navigator.userAgent.includes("Chrome"),
+    });
+
+    componentTest("button + text input", {
+      template: hbs`{{text-field}} {{d-button icon="plus" label="topic.create"}}`,
+
+      test(assert) {
+        assert.equal(
+          query("input").offsetHeight,
+          query(".btn").offsetHeight,
+          "have equal height"
+        );
+      },
+
+      skip: !navigator.userAgent.includes("Chrome"),
+    });
+
+    componentTest("combo box + input", {
+      template: hbs`{{combo-box options=(hash none="category.none")}} {{text-field}}`,
+
+      test(assert) {
+        assert.equal(
+          query("input").offsetHeight,
+          query(".combo-box").offsetHeight,
+          "have equal height"
+        );
+      },
+
+      skip: !navigator.userAgent.includes("Chrome"),
+    });
+  }
+);
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs b/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
index d27bd9a0fda9b..18801763a61e5 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
@@ -11,4 +11,6 @@
   {{#if selectKit.options.showCaret}}
     {{d-icon caretIcon class="caret-icon"}}
   {{/if}}
+  &#8203;
+  {{! Zero-width space character, so icon-only button height = regular button height }}
 </div>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index f9e6186dfc29b..5d83ed4914253 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -414,14 +414,7 @@ $mobile-breakpoint: 700px;
     clear: both;
     padding: 4px;
   }
-  @include breakpoint(tablet) {
-    .select-kit.period-chooser
-      .period-chooser-header
-      h2.selected-name
-      .top-date-string {
-      font-size: $font-down-3;
-    }
-  }
+
   .controls {
     @include clearfix;
   }
@@ -534,15 +527,18 @@ $mobile-breakpoint: 700px;
     padding: 10px;
     display: flex;
     align-items: center;
+    .inline-form {
+      // Hacky, but fixes email preview summary
+      margin-bottom: -0.5em;
+      > div {
+        margin-right: 0.5em;
+      }
+    }
+
     @include breakpoint(mobile-extra-large) {
       margin: 0 -10px;
     }
-    label {
-      margin-bottom: 0;
-    }
     input {
-      margin-right: 5px;
-      margin-bottom: 0;
       @include breakpoint(tablet) {
         max-width: 150px;
       }
@@ -889,13 +885,14 @@ table#user-badges {
   margin-left: 0;
 
   .emoji-details {
+    @include form-item-sizing;
     display: flex;
     align-items: center;
     min-height: 30px;
-    padding: $input-padding;
-    line-height: 1;
     color: var(--primary);
-    border: 1px solid var(--primary-low);
+    border-color: var(--primary-low);
+    padding-left: 10px;
+    padding-right: 10px;
 
     .emoji-name {
       margin-left: 0.5em;
@@ -985,13 +982,6 @@ table#user-badges {
   }
 }
 
-// Mobile view text-inputs need some padding
-.mobile-view .admin-contents {
-  input[type="text"] {
-    padding: 4px;
-  }
-}
-
 .mobile-view .full-width {
   margin: 0;
 }
diff --git a/app/assets/stylesheets/common/admin/admin_emojis.scss b/app/assets/stylesheets/common/admin/admin_emojis.scss
index fd2cfddb06678..9eeb1939a9f1a 100644
--- a/app/assets/stylesheets/common/admin/admin_emojis.scss
+++ b/app/assets/stylesheets/common/admin/admin_emojis.scss
@@ -1,25 +1,9 @@
-.admin-emojis {
-  #custom_emoji {
-    .select-kit {
-      width: 220px;
-    }
+.admin-contents.admin-emojis {
+  #custom_emoji .select-kit,
+  .emoji-uploader .select-kit {
+    max-width: 210px;
   }
-
-  .emoji-uploader {
-    display: flex;
-    align-items: flex-end;
-
-    input,
-    .select-kit {
-      width: 220px;
-      margin: 0 1em 0 0;
-    }
-
-    .upload-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-    }
+  #custom_emoji td.action {
+    text-align: right;
   }
 }
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index a11c8990c3fe7..5a9e7bf4fc2ba 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -181,11 +181,6 @@
       .refresh-report-btn {
         width: 100%;
       }
-
-      .d-date-time-input-range {
-        flex-direction: column;
-        width: 100%;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 45dac3e005018..61eaaa87f9c1b 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -678,23 +678,8 @@
 }
 
 .permalink-form {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  @include breakpoint(tablet, min-width) {
-    align-items: center;
-    flex-direction: row;
-  }
-
   .select-kit {
-    width: 200px;
-  }
-  input {
-    margin: 5px 0;
-    @include breakpoint(tablet, min-width) {
-      margin: 0 5px;
-    }
+    max-width: 200px;
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 1d00eb79d22be..955cf91cdc633 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -230,17 +230,8 @@
     }
   }
 
-  .section {
-    .period-chooser .period-chooser-header {
-      .selected-name,
-      .d-icon {
-        font-size: $font-up-1;
-      }
-
-      .d-icon {
-        margin: 0;
-      }
-    }
+  .period-chooser .period-chooser-header {
+    font-size: var(--font-down-2);
   }
 
   .dashboard-problems {
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index ddb2a0010a9fe..29da56957d023 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -76,21 +76,9 @@
   padding: 0.25em 0;
 }
 
-.email-preview {
-  .digest-refresh-button {
-    margin: 0 0.5em;
-  }
-}
-
 .email-preview-digest {
   .controls {
     margin: 1em 0.5em;
-    input[type="text"] {
-      margin-bottom: 0;
-    }
-    label {
-      display: inline;
-    }
   }
   .preview-output iframe {
     width: 100%;
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 3953f0847d230..c5cb456c86322 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -151,37 +151,14 @@
   }
   button {
     margin-left: auto;
-    display: flex;
   }
   margin: 0 0 1em 0;
   a.filter {
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: 0.25em;
-    background-color: var(--primary-low);
-    padding: 3px 10px;
-    color: var(--primary);
-    &:hover {
-      color: var(--primary);
-      background-color: var(--primary-low);
-    }
     .label {
       font-weight: bold;
     }
     .d-icon {
-      margin-left: 6px;
-    }
-  }
-}
-
-.admin-logs-table {
-  input.ember-text-field {
-    padding: 1px 4px;
-  }
-  .btn {
-    padding: 2px 8px;
-    .fa {
-      margin-right: 2px;
+      margin-left: 0.5em;
     }
   }
 }
@@ -190,43 +167,19 @@
   display: block;
 }
 
-.screened-ip-address-form {
-  margin-left: 6px;
-  .combobox {
-    width: 130px;
-  }
-}
-
 .screened-ip-controls {
   display: flex;
   flex-wrap: wrap;
-  input {
-    flex: 1 1 auto;
-    margin: 0 0.25em 0.25em;
-  }
-  b {
-    margin: 0 0.25em;
-  }
-  .select-kit {
-    margin: 0 0.25em 0.25em 0.25em;
-    flex: 1 1 auto;
-  }
-  .filter-screened-ip-address,
   .screened-ip-address-form {
-    margin: 0 -0.25em 1em;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  @media screen and (min-width: 800px) {
-    .screened-ip-address-form {
+    .combobox {
+      width: 140px;
+    }
+    @media screen and (min-width: 900px) {
       margin-left: auto;
     }
-  }
-  button {
-    display: flex;
-    white-space: nowrap;
-    margin: 0 0.25em 0.25em;
+    @media screen and (max-width: 899px) {
+      margin-top: 1em;
+    }
   }
 }
 
@@ -238,17 +191,10 @@ table.screened-ip-addresses {
       width: 80%;
     }
   }
-  td.action {
-    display: flex;
-    align-items: baseline;
-    .d-icon-check {
-      color: var(--success);
-    }
-    .d-icon-ban {
-      color: var(--danger);
-    }
-    .d-icon {
-      margin-right: 0.25em;
+  td.actions {
+    text-align: right;
+    .cancel-action {
+      margin-left: 0.5em;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
index b142448627c68..4f3b6d77e9a4d 100644
--- a/app/assets/stylesheets/common/admin/suspend.scss
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -16,12 +16,6 @@
     margin-bottom: 0.5em;
   }
 
-  .textarea,
-  input[type="text"] {
-    box-sizing: border-box;
-    height: 2.5em;
-  }
-
   .inline-spinner {
     float: right;
   }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index cf1105b23c039..2ab9b3fdd2ed9 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -5,10 +5,6 @@
     &:not(:first-child) {
       margin-left: 0.5em;
     }
-    .d-button-label {
-      font-size: $font-up-1;
-      font-weight: normal;
-    }
   }
 
   .notifications-button {
@@ -61,7 +57,8 @@
 #navigation-bar {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 0 var(--nav-space);
+  margin: 0;
+  margin-bottom: var(--nav-space);
   margin-right: auto;
 }
 
@@ -72,17 +69,6 @@
   > * {
     white-space: nowrap;
   }
-  .select-kit button {
-    height: 100%; // ensures nested select-kit button matches height of button siblings
-  }
-  .btn {
-    // need to reduce vertical padding for consistent height
-    padding-top: 0.3em;
-    padding-bottom: 0.3em;
-    @include breakpoint(mobile-medium) {
-      font-size: var(--font-down-1);
-    }
-  }
   @include breakpoint(mobile-large) {
     .edit-category {
       .d-button-label {
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 7d80e3d378c16..4ebb76ae78f41 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -13,11 +13,14 @@
 
   .colorpicker-wrapper {
     display: flex;
-    align-items: center;
-    input,
+    align-items: flex-start;
     .add-on {
-      align-self: flex-start;
-      margin-bottom: 0.125em;
+      @include form-item-sizing;
+      background-color: var(--primary-low);
+      border-color: var(--primary-medium);
+      border-right-color: transparent;
+      padding-left: 0.5em;
+      padding-right: 0.5em;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index e216dc45e30b3..d0f409598d7ff 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -470,12 +470,6 @@ div.ac-wrap {
   }
 }
 
-.future-date-input {
-  .examples {
-    color: var(--primary-medium);
-  }
-}
-
 .md-table {
   overflow-y: auto;
   margin: 1em 0;
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index ffbd1a51449a8..450f561500d38 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -11,20 +11,7 @@
     overflow-x: auto;
   }
 
-  .open-edit-columns-btn {
-    vertical-align: top;
-    padding: 0.45em 0.8em;
-  }
-
   &.users-directory {
-    .period-chooser {
-      .selected-name {
-        margin: 0;
-      }
-      .period-chooser-header .caret-icon {
-        margin: 0;
-      }
-    }
     .directory-group-selector {
       vertical-align: top;
     }
@@ -43,9 +30,7 @@
     justify-content: space-between;
     .total-rows {
       color: var(--primary-medium);
-    }
-    .filter-name {
-      height: 1em;
+      font-weight: normal;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 2c311cdc5c8d2..9d17c754915f5 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -213,74 +213,50 @@ input {
   &[type="tel"],
   &[type="color"] {
     @include appearance-none;
+    @include form-item-sizing;
     display: inline-block;
-    padding: $input-padding;
     margin-bottom: 9px;
-    font-size: $font-0;
-    line-height: $line-height-small;
     color: var(--primary);
     background-color: var(--secondary);
     border: 1px solid var(--primary-medium);
     border-radius: 0;
-    box-sizing: border-box;
-    min-height: 30px;
     &:focus {
       @include default-focus;
     }
   }
+
+  &[type="time"] {
+    max-width: 140px;
+  }
 }
 
-::placeholder {
-  text-overflow: ellipsis;
+// Fixes Safari height inconsistency
+::-webkit-datetime-edit {
+  display: inline;
 }
 
-.input {
-  &-prepend,
-  &-append {
-    margin-bottom: 5px;
-    input[class*="span"] {
-      display: inline-block;
-    }
-    input,
-    select {
-      position: relative;
-      margin-bottom: 0;
-      vertical-align: middle;
-      border-radius: 0;
-      &:focus {
-        z-index: z("base") + 1;
-      }
-    }
-    .add-on {
-      display: inline-flex;
-      align-items: center;
-      width: auto;
-      padding: 0 0.5em;
-      height: 28px;
-      background-color: var(--primary-low);
-      border: 1px solid var(--primary-medium);
-    }
-    .add-on,
-    .btn {
-      &:first-child {
-        margin-right: -1px;
-      }
-      &:last-child {
-        margin-left: -1px;
-        border-radius: 0 3px 3px 0;
-      }
-    }
-  }
+// Fixes Webkit inconsistencies (Safari/Chrome)
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-year-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
-  &-prepend {
-    .add-on,
-    .btn {
-      margin-right: -1px;
-    }
-  }
+// Fixes Chrome height inconsistency
+::-webkit-calendar-picker-indicator {
+  height: 100%;
+}
+
+::placeholder {
+  text-overflow: ellipsis;
 }
 
 textarea {
+  padding: $vpad $hpad;
+  box-sizing: border-box;
   height: auto;
   background-color: var(--secondary);
   border: 1px solid var(--primary-medium);
@@ -643,9 +619,7 @@ table {
 .form-vertical {
   input,
   textarea,
-  select,
-  .input-prepend,
-  .input-append {
+  select {
     display: inline-block;
     margin-bottom: 0;
     flex: 0 0 auto;
diff --git a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
index 47c9a68bfb40a..f27af37286929 100644
--- a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
@@ -41,29 +41,6 @@
   .btn.pull-right {
     margin-right: 10px;
   }
-  .future-date-input {
-    input {
-      margin: 0;
-    }
-    .alert-info {
-      margin: 0 -15px -15px -15px;
-    }
-    .btn-clear {
-      display: none;
-    }
-    .topic-timer-info {
-      border: none;
-      padding: 0;
-      h3 {
-        font-weight: normal;
-        font-size: $font-up-1;
-      }
-    }
-
-    input[disabled] {
-      background: var(--primary-low);
-    }
-  }
   .pika-single {
     position: absolute !important; /* inline JS styles */
   }
@@ -74,10 +51,3 @@
     }
   }
 }
-
-// mobile styles
-.mobile-view .edit-topic-timer-modal {
-  .select-kit.combo-box {
-    flex: 1 0 0px;
-  }
-}
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index f61657fe666ec..d0b67ca985bf4 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -121,18 +121,6 @@
     .category-chooser {
       width: 100%;
     }
-
-    .d-date-time-input-range {
-      width: inherit;
-      border: none;
-      padding: 0;
-      flex-direction: column;
-
-      .d-date-input {
-        flex: 1 1 auto;
-        border: 1px solid var(--primary-medium);
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 013d50e293f91..8fb4cd0eb770e 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -129,10 +129,6 @@
   .select-kit.multi-select .choices {
     padding: 0;
   }
-
-  .select-kit.multi-select.is-expanded + button {
-    outline: 1px solid var(--tertiary); // outline the button when the input is outlined, to match height
-  }
 }
 
 // topic invite modal
@@ -140,11 +136,6 @@
 .create-invite-modal {
   form {
     margin: 0;
-    input[type="text"],
-    .btn,
-    .select-kit-header {
-      height: 2.27rem;
-    }
   }
 
   input {
@@ -181,33 +172,6 @@
     margin-top: 0.25em;
   }
 
-  .future-date-input {
-    display: grid;
-    grid-template-columns: auto 1fr;
-
-    .control-group:nth-child(1) {
-      grid-column-start: 1;
-      grid-column-end: 3;
-    }
-    .control-group:nth-child(2) {
-      margin-left: 1.75em;
-      margin-right: 1.5em;
-    }
-    .control-group:nth-child(2),
-    .control-group:nth-child(3) {
-      grid-row-start: 2;
-      display: inline-flex;
-      align-items: center;
-      margin-bottom: 0;
-      input {
-        height: 100%;
-        margin-bottom: 0;
-        margin-left: 0.5em;
-        width: 150px;
-      }
-    }
-  }
-
   .input-group.input-email {
     display: flex;
     align-items: baseline;
@@ -242,7 +206,9 @@
     &.invite-to-topic input[type="text"],
     .group-chooser,
     .user-chooser,
-    .future-date-input-selector {
+    .future-date-input-selector,
+    .future-date-input-date-picker,
+    .future-date-input-time-picker {
       margin-left: 1.75em;
       width: calc(100% - 1.75em);
     }
diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss
index ce922a71d2dec..49162d80ebd20 100644
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@@ -6,22 +6,6 @@ $mobile-breakpoint: 700px;
   }
 }
 
-.bookmark-search-form {
-  margin-bottom: 1em;
-  display: flex;
-
-  input[type="text"] {
-    flex: 1;
-    margin-right: 1em;
-  }
-
-  @media (max-width: $mobile-breakpoint) {
-    input[type="text"] {
-      margin-bottom: 0;
-    }
-  }
-}
-
 .bookmark-list-item {
   td.post-metadata {
     text-align: center;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 8dd59fd5f8741..207eabd8ac063 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -13,16 +13,12 @@
   $hover-bg-color: var(--primary-medium),
   $hover-icon-color: var(--primary-low)
 ) {
-  box-sizing: border-box;
+  @include form-item-sizing;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0;
-  padding: 0.53em 0.8em;
-  border: none;
   font-weight: normal;
-  font-size: $font-0;
-  line-height: normal;
   color: $text-color;
   background: $bg-color;
   cursor: pointer;
@@ -35,7 +31,6 @@
   &.no-text {
     .d-icon {
       margin-right: 0;
-      min-height: 17px;
     }
   }
   @include hover {
@@ -59,6 +54,7 @@
   &:active,
   &.btn-active {
     @include linear-gradient($hover-bg-color 0%, $bg-color 100%);
+    border-bottom-color: $bg-color;
   }
   &[disabled],
   &.disabled {
@@ -253,20 +249,14 @@
 // Small
 
 .btn-small {
-  padding: 6px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   min-height: 20px;
-  .d-icon {
-    max-height: 0.87em;
-  }
 }
 
 // Large
 
 .btn-large {
-  padding: 9px 18px;
-  font-size: $font-up-1;
-  line-height: $line-height-small;
+  font-size: var(--font-up-1);
 }
 
 // Bonus Buttons
@@ -287,9 +277,8 @@
   }
   &.close {
     padding: 0;
-    min-height: unset;
     background: transparent;
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     .d-icon {
       color: var(--primary-high);
     }
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index 7b09d20b4d3c8..372f4792bd61c 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -3,7 +3,7 @@
   cursor: pointer;
   flex-direction: column;
   min-width: 140px;
-  flex: 1 0 100%;
+  flex: 1 0 auto;
 
   .date-picker {
     cursor: pointer;
diff --git a/app/assets/stylesheets/common/components/date-picker.scss b/app/assets/stylesheets/common/components/date-picker.scss
index b4fac1b2e8177..0046eeac86d95 100644
--- a/app/assets/stylesheets/common/components/date-picker.scss
+++ b/app/assets/stylesheets/common/components/date-picker.scss
@@ -12,10 +12,9 @@
   display: inline-block;
 }
 
-.date-picker {
-  text-align: center;
-  width: 8em;
+input.date-picker {
   margin: 0;
+  max-width: 180px;
 }
 
 .pika-single {
diff --git a/app/assets/stylesheets/common/components/date-time-input-range.scss b/app/assets/stylesheets/common/components/date-time-input-range.scss
index 0fb591a60b3c2..5a924bedaf36d 100644
--- a/app/assets/stylesheets/common/components/date-time-input-range.scss
+++ b/app/assets/stylesheets/common/components/date-time-input-range.scss
@@ -1,5 +1,5 @@
 .d-date-time-input-range {
-  border: 1px solid var(--primary-low);
-  display: inline-flex;
-  box-sizing: border-box;
+  .from {
+    margin-bottom: 0.5em;
+  }
 }
diff --git a/app/assets/stylesheets/common/components/date-time-input.scss b/app/assets/stylesheets/common/components/date-time-input.scss
index 59506297d80dd..ec3c7ca3cf93d 100644
--- a/app/assets/stylesheets/common/components/date-time-input.scss
+++ b/app/assets/stylesheets/common/components/date-time-input.scss
@@ -1,11 +1,11 @@
 .d-date-time-input {
   display: flex;
-  border: 1px solid var(--primary-low);
+  border: 1px solid var(--primary-medium);
   box-sizing: border-box;
   position: relative;
 
-  .date-picker,
-  .fields {
+  .date-picker {
+    max-width: unset;
     border-color: transparent;
   }
 
@@ -15,10 +15,10 @@
   }
 
   .d-time-input {
-    .combo-box {
-      .select-kit-header {
-        border-color: transparent;
-      }
+    width: 90px;
+    .select-kit-header {
+      border-color: transparent;
+      width: 90px;
     }
   }
 
diff --git a/app/assets/stylesheets/common/components/ignored-user-list.scss b/app/assets/stylesheets/common/components/ignored-user-list.scss
index 6fda27d524d5b..02135f37206f2 100644
--- a/app/assets/stylesheets/common/components/ignored-user-list.scss
+++ b/app/assets/stylesheets/common/components/ignored-user-list.scss
@@ -11,25 +11,12 @@
 
 .ignored-user-list-item {
   border: 1px solid var(--primary-medium);
-  border-radius: 5px;
   padding: 0;
   display: flex;
   align-items: center;
   margin-right: 10px;
 }
 
-.remove-ignored-user {
-  display: flex;
-  flex: 1 0 0px;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 0 0.25em 0.25em 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  height: 100%;
-}
-
 .ignored-user-name {
   padding-left: 10px;
   padding-right: 10px;
diff --git a/app/assets/stylesheets/common/components/time-shortcut-picker.scss b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
index bc1af733ccddf..4c0fe065cdb6b 100644
--- a/app/assets/stylesheets/common/components/time-shortcut-picker.scss
+++ b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
@@ -18,16 +18,11 @@
   .tap-tile-time-input {
     display: flex;
     align-items: center;
-    input {
-      width: 100%;
-      min-width: unset;
-    }
   }
 
   .date-picker,
   .time-input {
     text-align: left;
-    padding-top: 5px;
   }
 
   .time-input,
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 4d7ddc2b559d9..b8f7d466bf732 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -281,16 +281,6 @@
     margin: 0;
   }
 
-  button {
-    background: pink;
-  }
-
-  .select-kit {
-    .select-kit-header {
-      margin: 0;
-    }
-  }
-
   .d-editor-spacer {
     margin: 0 0.25em;
   }
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 21b41ea8a96d8..97ff00ae51f0d 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -154,3 +154,31 @@ input[type="reset"],
 input[type="submit"] {
   cursor: pointer;
 }
+
+// Inline form
+// --------------------------------------------------
+
+.inline-form {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  &.full-width {
+    display: flex;
+  }
+
+  > input[type="text"] {
+    display: inline-flex;
+    flex: 1;
+  }
+
+  > .select-kit,
+  > input[type="text"],
+  > label,
+  > .btn {
+    margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
+    margin-right: 0.5em;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 5a5d79ae5d2b5..9e203d02153e2 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -75,6 +75,23 @@ $breakpoints: (
 //
 // --------------------------------------------------
 
+$vpad: 0.5em;
+$hpad: 0.65em;
+
+// for consistent sizing across inputs, buttons and dropdowns
+@mixin form-item-sizing {
+  border: 1px solid transparent;
+  font-size: var(--font-0);
+  line-height: normal;
+  box-sizing: border-box;
+  padding: $vpad $hpad;
+  .ios-device & {
+    font-size: var(--font-size-ios-input);
+    padding-top: $vpad * 0.8;
+    padding-bottom: $vpad * 0.8;
+  }
+}
+
 @mixin sticky {
   position: -webkit-sticky;
   position: sticky;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index ff672beab2707..f08ceb2993a59 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -9,7 +9,6 @@ $small-width: 800px !default;
 $medium-width: 995px !default;
 $large-width: 1110px !default;
 
-$input-padding: 4px 10px;
 $topic-body-width: 690px;
 $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
@@ -65,8 +64,6 @@ $font-down-4: var(--font-down-4) !default;
 $font-down-5: var(--font-down-5) !default;
 $font-down-6: var(--font-down-6) !default;
 
-$font-size-ios-input: var(--font-size-ios-input) !default;
-
 // Common line-heights
 $line-height-small: var(--line-height-small) !default;
 $line-height-medium: var(--line-height-medium) !default;
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index edebb874c7960..53b4a8ef65143 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -27,10 +27,7 @@
 
     .select-kit-header {
       background: var(--secondary);
-      border: 1px solid var(--primary-medium);
-      padding: 0 0.25em 0 0.5em;
-      font-weight: 500;
-      font-size: $font-0;
+      border-color: var(--primary-medium);
 
       &.is-focused {
         @include default-focus;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 2fa6dc043c3b0..efc90f0b5bff0 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -68,16 +68,10 @@
       }
 
       .select-kit-header {
-        box-sizing: border-box;
-        border: 1px solid transparent;
+        display: inline-flex;
         align-items: center;
         justify-content: space-between;
         flex-direction: row;
-        display: inline-flex;
-
-        .select-kit-header-wrapper {
-          min-height: unset;
-        }
 
         .d-icon + .d-icon {
           margin-left: 0.25em;
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index 951c54744a59c..1b1fa7082f785 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -36,3 +36,15 @@
     }
   }
 }
+
+.future-date-input {
+  .future-date-input-date-picker,
+  .future-date-input-time-picker {
+    margin-top: 0.5em;
+    margin-bottom: 0;
+    input {
+      margin-bottom: 0;
+      margin-left: 5px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 8662ddb33ad7b..063881b5f910f 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -49,12 +49,7 @@
 
     .multi-select-header {
       background: var(--secondary);
-      border: 1px solid var(--primary-medium);
-      padding: 0 0.25em 0 0.5em;
-      font-weight: 500;
-      font-size: var(--font-0);
-      box-sizing: border-box;
-      overflow: hidden;
+      border-color: var(--primary-medium);
 
       .formated-selection {
         margin: 0;
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index a4b30273da1bc..c8a8dbced9942 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -10,21 +10,13 @@
 
       .period-chooser-header {
         display: inline-block; // safari 14 has issues with summary elements and flexbox
-        background: none;
-        border: none;
-        width: auto;
-        height: auto;
+        background: transparent;
+        border-color: transparent;
         padding: 0;
 
         h2.selected-name {
           color: var(--secondary);
           display: inline-block;
-          box-sizing: border-box;
-
-          // for text + caret alignment
-          line-height: 1;
-          vertical-align: bottom;
-          margin-bottom: 10px;
 
           .date-section {
             color: var(--primary);
@@ -42,14 +34,14 @@
         .d-icon {
           color: var(--primary);
           opacity: 1;
-          margin: 5px 0 10px 5px;
           font-size: $font-up-3;
         }
 
         &.is-focused,
+        &:focus,
         &:hover {
-          background: none;
-          border: none;
+          background: transparent;
+          border-color: transparent;
           outline: none;
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 5054b71f3cdeb..965807d3e09c3 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -65,12 +65,17 @@
   }
 
   .select-kit-header {
-    box-sizing: border-box;
+    @include form-item-sizing;
+    font-weight: 500;
     overflow: hidden;
     transition: all 0.25s;
     cursor: pointer;
     display: flex;
     align-items: stretch;
+    &:not(.btn) {
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+    }
 
     /* hide native indicator */
     &::-webkit-details-marker {
@@ -79,12 +84,9 @@
 
     .select-kit-header-wrapper {
       box-sizing: border-box;
-      min-height: 28px;
       display: flex;
       flex: 1 0 auto;
       align-items: center;
-      height: 100%;
-      max-width: 100%;
     }
 
     .d-icon-spinner {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index ecc79e17d42f0..cf56fab5be965 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -60,7 +60,6 @@ textarea {
 select,
 textarea {
   display: inline-block;
-  padding: 4px;
   margin-bottom: 9px;
   font-size: $font-0;
   line-height: $line-height-large;
@@ -129,9 +128,7 @@ input {
 
   input,
   textarea,
-  select,
-  .input-prepend,
-  .input-append {
+  select {
     display: inline-block;
     margin-bottom: 0;
   }
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 6d3cf8a313f2b..02c43e35286b7 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -1,6 +1,5 @@
 @import "admin_badges";
 @import "admin_customize";
-@import "admin_emojis";
 @import "admin_report_counters";
 @import "admin_report_table";
 @import "admin_report";
diff --git a/app/assets/stylesheets/mobile/admin_emojis.scss b/app/assets/stylesheets/mobile/admin_emojis.scss
deleted file mode 100644
index 2014a51ba3dbd..0000000000000
--- a/app/assets/stylesheets/mobile/admin_emojis.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.admin-emojis {
-  #custom_emoji {
-    .select-kit {
-      display: none;
-    }
-
-    tbody tr th {
-      @include ellipsis;
-
-      &:nth-child(2) {
-        max-width: 80px;
-      }
-    }
-  }
-
-  .emoji-uploader {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-
-    .control {
-      margin-bottom: 1em;
-      width: 100%;
-
-      input,
-      .select-kit {
-        width: 100%;
-      }
-    }
-
-    .upload-container {
-      margin: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 3f48200c47644..71c7f2f2e8057 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -200,6 +200,16 @@
         }
       }
     }
+
+    .formated-selection {
+      font-size: var(--font-down-1);
+    }
+  }
+
+  .without-tags {
+    .category-input {
+      margin-left: 5px;
+    }
   }
 
   .user-selector {
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index aeb4216715ad5..9d33779732795 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -12,29 +12,10 @@ body {
 .ios-device {
   textarea {
     background-color: var(--secondary);
-    font-size: $font-size-ios-input;
+    font-size: var(--font-size-ios-input);
     -webkit-tap-highlight-color: transparent;
   }
 
-  input {
-    &[type="text"],
-    &[type="password"],
-    &[type="datetime"],
-    &[type="datetime-local"],
-    &[type="date"],
-    &[type="month"],
-    &[type="time"],
-    &[type="week"],
-    &[type="number"],
-    &[type="email"],
-    &[type="url"],
-    &[type="search"],
-    &[type="tel"],
-    &[type="color"] {
-      font-size: $font-size-ios-input;
-    }
-  }
-
   input#reply-title {
     -webkit-tap-highlight-color: transparent;
   }
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index bcf55dd527980..0e67e9f39ff49 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -20,16 +20,9 @@
     .multi-select,
     .select-kit-header,
     .date-picker-wrapper {
-      height: 34px;
-      margin: 0;
       width: 100%;
     }
 
-    button {
-      height: 34px;
-      margin-left: 5px;
-    }
-
     .date-picker-wrapper {
       margin-right: 5px;
     }
@@ -94,22 +87,6 @@
     }
   }
 
-  .d-date-time-input {
-    border: 1px solid var(--primary-medium);
-    justify-content: space-between;
-    width: 100%;
-
-    .d-date-input {
-      flex: auto;
-    }
-
-    .d-time-input {
-      .select-kit-header {
-        min-width: 120px;
-      }
-    }
-  }
-
   .tip {
     display: block;
     font-size: $font-down-1;
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 3a62944369b6c..80d5b6f911ea8 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -186,9 +186,3 @@ body.crawler {
     }
   }
 }
-
-.poll-ui-builder {
-  .poll-date input {
-    height: 30px;
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6 b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
index c036e4c3668f4..0e01c5fc44bf1 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
@@ -208,6 +208,7 @@ export function createData(store) {
     buttonSizes: [
       { class: "btn-large", text: "large" },
       { class: "btn-default", text: "default" },
+      { class: "btn-small", text: "small" },
     ],
 
     buttonStates: [
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
index c9dcb818cc4fa..1d95124fb951b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
@@ -1,4 +1,4 @@
-{{#styleguide-example title=".btn-icon - sizes"}}
+{{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -10,7 +10,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-text - sizes"}}
+{{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -22,7 +22,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-default .btn-icon-text - sizes"}}
+{{#styleguide-example title=".btn-default .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -34,7 +34,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-primary .btn-icon-text"}}
+{{#styleguide-example title=".btn-primary .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button
       class=(concat "btn-primary " bs.class)
@@ -56,7 +56,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-danger .btn-icon-text - sizes"}}
+{{#styleguide-example title=".btn-danger .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button
       class=(concat "btn-danger " bs.class)
@@ -78,7 +78,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-flat - sizes"}}
+{{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
   {{/each}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
index 5623886be513b..b9f9528515383 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
@@ -6,10 +6,65 @@
   {{password-field type="password" placeholder="Placeholder"}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="text-field search"}}
-  {{text-field type="search" placeholder="Placeholder"}}
-{{/styleguide-example}}
-
 {{#styleguide-example title="textarea"}}
   {{textarea placeholder="Placeholder"}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="inline-form"}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with icon button"}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with single input"}}
+  <div class="inline-form full-width">
+    {{text-field placeholder="Placeholder"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with input and icon button"}}
+  <div class="inline-form full-width">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select"}}
+  <div class="inline-form">
+    {{text-field}}
+    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select and label"}}
+  <div class="inline-form">
+    <label>Text:</label>
+    {{text-field}}
+    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="category-notifications-button and regular button"}}
+  <div class="inline-form">
+    {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
+    {{d-button icon="reply" type="submit" translatedLabel="Button"}}
+  </div>
+{{/styleguide-example}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
index 756ede94ecd11..cbea914449c20 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
@@ -7,9 +7,27 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="date-time-input"}}
-  {{date-time-input}}
+  {{date-time-input clearable=true}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="date-time-input-range"}}
   {{date-time-input-range}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="date-time-input-range"}}
+  {{date-time-input-range showFromTime=false showToTime=false}}
+{{/styleguide-example}}
+
+{{#styleguide-example title="future-date-input"}}
+  {{future-date-input
+    displayLabelIcon="far-clock"
+    includeDateTime=true
+    includeMidFuture=true
+    clearable=true
+  }}
+{{/styleguide-example}}
+
+{{#styleguide-example title="date-picker"}}
+  {{date-picker defaultDate="YYYY-MM-DD"}}
+{{/styleguide-example}}
+
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index 41dae968c48de..271e99e49db5e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
@@ -47,7 +47,7 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="dropdown-select-box"}}
-  {{dropdown-select-box content=dummy.options onChange=(action "dummy")}}
+  {{dropdown-select-box content=dummy.options title="Something" onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="future-date-input-selector"}}
@@ -61,7 +61,7 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="multi-select"}}
-  {{multi-select content=dummy.options options=(hash none="test.none") onChange=(action "dummy")}}
+  {{multi-select content=dummy.options onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="admin group-chooser"}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
index 3d54f3fbaedf7..01d0642aa4776 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
@@ -4,8 +4,10 @@
       {{#d-section class="navigation-container"}}
         {{bread-crumbs categories=dummy.categories}}
         {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
-        {{categories-admin-dropdown}}
-        {{create-topic-button canCreateTopic=true}}
+        <div class="navigation-controls">
+          {{categories-admin-dropdown}}
+          {{create-topic-button canCreateTopic=true}}
+        </div>
       {{/d-section}}
     </div>
   </div>
diff --git a/plugins/styleguide/assets/stylesheets/styleguide.scss b/plugins/styleguide/assets/stylesheets/styleguide.scss
index 5f2b6425b4b38..8c5ff61a3da39 100644
--- a/plugins/styleguide/assets/stylesheets/styleguide.scss
+++ b/plugins/styleguide/assets/stylesheets/styleguide.scss
@@ -42,7 +42,6 @@
 
   .styleguide-contents {
     flex: 4 0 0;
-    font-size: 14px;
   }
 
   .styleguide-section {
@@ -67,7 +66,7 @@
     .styleguide-example {
       .example-title {
         color: var(--primary-medium);
-        font-size: var(--font-0);
+        font-size: var(--font-down-1);
         border-bottom: 1px solid var(--primary-low);
         margin-bottom: 1em;
       }