Add a min-height: 1.5rem; to custom controls

Fixes #20730.

This change computes the minimum needed height of what a single line of text would be for the custom checkboxes/radios. This is required because our custom control indicators are positioned absolutely, meaning they cannot be clearfixed or anything like that. Using a computed value means it should scale nicely in case of customization

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index e74f5c744a8f74b22eb232abac03202adb7e403e..5880f2cdc07080e2569f0a8dc5cda70e82ae1635 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -12,6 +12,7 @@
 .custom-control {
   position: relative;
   display: inline-block;
+  min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
   cursor: pointer;