Field: pad inputs and selects to match Button height
Assisted-by: Claude Opus 5.5 via Claude Code
change ryqwpwrttrlttrlurqknumosvmpromno
commit a4dffd34ed2454f1bdf6eaf4cf414bfdce9533c6
author Alpha Chen <alpha@kejadlen.dev>
date
parent 80eba756
diff --git a/_sass/components/field.css b/_sass/components/field.css
index d4f9ccc..2fc2f74 100644
--- a/_sass/components/field.css
+++ b/_sass/components/field.css
@@ -37,11 +37,13 @@
 
 /* Input / Select — bordered, matched to each other exactly. Both tags ARE
    the component, so they are styled bare; nothing else on this site uses a
-   text input or a select. */
+   text input or a select. Padding sits on Button's rungs, less the border,
+   so a control and a default Button are the same height. */
 input:not([type="checkbox"]):not([type="radio"]),
 select {
   width: 100%;
-  padding: var(--gl-space-xs) var(--gl-space-s);
+  padding: calc(var(--gl-space-2xs) - 1px) calc(var(--gl-space-xs) - 1px);
+  line-height: 1.15;
   background: var(--gl-color-surface-card);
   border: 1px solid var(--gl-color-border-default);
   border-radius: var(--gl-radius-sm);