Remove explicit heights on form elements (#31993)

* Remove explicit heights

* Link to upstream bug

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

scss/forms/_form-control.scss

@@ -5,7 +5,6 @@
 .form-control {
   display: block;
   width: 100%;
-  min-height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-family: $input-font-family;
   @include font-size($input-font-size);
@@ -45,6 +44,14 @@
     }
   }
 
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+  &::-webkit-date-and-time-value {
+    // Multiply line-height by 1em if it has no unit
+    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+  }
+
   // Placeholder
   &::placeholder {
     color: $input-placeholder-color;
@@ -180,6 +187,24 @@
   }
 }
 
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+  &.form-control {
+    min-height: $input-height;
+  }
+
+  &.form-control-sm {
+    min-height: $input-height-sm;
+  }
+
+  &.form-control-lg {
+    min-height: $input-height-lg;
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
 .form-control-color {
   max-width: 3rem;
   padding: $input-padding-y;