From 078a1c81660ed0d673656c6b3308b2e38eacd181 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Tue, 30 Jan 2024 13:33:19 -0600
Subject: [PATCH] Use consistent padding for input and select elements

Only apply extra top padding to textareas where it is needed.

Also removed unnecessary floating label background for non-textareas (supersedes #39480).
---
 scss/_variables.scss             |  8 ++++----
 scss/forms/_floating-labels.scss | 24 +++++++++++++++++++++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7b7cd8bf3f64..405bcd7cfd10 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1072,10 +1072,10 @@ $form-floating-height:                  add(3.5rem, $input-height-border) !defau
 $form-floating-line-height:             1.3125 !default;
 $form-floating-padding-x:               $input-padding-x !default;
 $form-floating-padding-y:               1rem !default;
-$form-floating-input-padding-t:         1.625rem !default;
-$form-floating-input-padding-b:         .625rem !default;
-$form-floating-select-padding-t:        1.25rem !default;
-$form-floating-select-padding-b:        .25rem !default;
+$form-floating-input-padding-t:         1.25rem !default;
+$form-floating-input-padding-b:         .25rem !default;
+$form-floating-textarea-padding-t:      1.625rem !default;
+$form-floating-textarea-padding-b:      .625rem !default;
 $form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 67d11785a6fa..ba4f66e0b6bf 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -47,8 +47,8 @@
   }
 
   > .form-select {
-    padding-top: $form-floating-select-padding-t;
-    padding-bottom: $form-floating-select-padding-b;
+    padding-top: $form-floating-input-padding-t;
+    padding-bottom: $form-floating-input-padding-b;
   }
 
   > .form-control:focus,
@@ -65,11 +65,29 @@
         z-index: -1;
         height: $form-floating-label-height;
         content: "";
-        background-color: $input-bg;
         @include border-radius($input-border-radius);
       }
     }
   }
+  > textarea.form-control {
+    // textareas require additional top padding to prevent label from overlapping text,
+    // and additional bottom padding for when text is scrolled.
+    &:focus,
+    &:not(:placeholder-shown) {
+      padding-top: $form-floating-textarea-padding-t;
+      padding-bottom: $form-floating-textarea-padding-b;
+    }
+    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+    &:-webkit-autofill {
+      padding-top: $form-floating-textarea-padding-t;
+      padding-bottom: $form-floating-textarea-padding-b;
+    }
+
+    // set textarea label background so it will remain legible when text is scrolled
+    ~ label::after {
+      background-color: $input-bg;
+    }
+  }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {