[FIX] web: make BS more robust with customized input groups

For some strange reason, BS is handling small and large input groups
pretty well but not normal ones. Indeed when customizing the paddings
of buttons and inputs individually, the normal-size input groups are
broken. Also, customizing the border width of buttons always breaks
input groups for all sizes. This is now fixed.

Note: the first problem was actually already solved by increasing the
input height to the button height. It makes actually more sense to
shrink the button size to the input height as this commit does (as this
is the input which is the main element in an input group).

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

1 files changed, 10 insertions, 3 deletions

diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index 75514a1065d..a196f3e228b 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -104,9 +104,16 @@
     right: auto#{"/*rtl:ignore*/"};
 }
 
-// Restore height to prevent flex to be ignored
-.input-group .form-control {
-    height: initial;
+// Review input group: BS allows to control button and input dimensions
+// individually but fails to make input-group correctly in all cases (for some
+// strange reasons they made it work well for sm and lg but not for the normal
+// sizing).
+.input-group-prepend,
+.input-group-append {
+    > .btn {
+        @include button-size($input-padding-y, $input-padding-x, $input-font-size, $input-line-height, $input-border-radius);
+        border-width: $input-border-width;
+    }
 }
 
 // Review $link-decoration behavior