Fix color heights (#32023)

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 7fe9f72001d20282c36cf649fc2ee8dfa439fb85..1fd1e1a8b3acc75f7a29675ba8168d6120bba8e4 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -207,17 +207,20 @@ textarea {
 
 .form-control-color {
   max-width: 3rem;
+  height: auto; // Override fixed browser height
   padding: $input-padding-y;
 
   &:not(:disabled):not([readonly]) {
     cursor: pointer;
   }
-}
 
-.form-control-color::-moz-color-swatch {
-  @include border-radius($input-border-radius);
-}
+  &::-moz-color-swatch {
+    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    @include border-radius($input-border-radius);
+  }
 
-.form-control-color::-webkit-color-swatch {
-  @include border-radius($input-border-radius);
+  &::-webkit-color-swatch {
+    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    @include border-radius($input-border-radius);
+  }
 }