From f8c3d1c36c9c7f41d282df8a529c5b288acac1f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Wed, 13 Mar 2024 08:58:57 +0100
Subject: [PATCH] MDL-81213 theme_boost: Fix .form-control width

MDL-75670 generated a regression in some forms where .form-control
elements where now being displayed as full width (Bootstrap default).

- Override Bootstrap default width: 100% for .form-control elements
- Move related .custom-select same override from core.scss to forms.scss
---
 theme/boost/scss/moodle/core.scss  |  5 -----
 theme/boost/scss/moodle/forms.scss | 11 +++++++++--
 theme/boost/style/moodle.css       | 14 +++++++-------
 theme/classic/style/moodle.css     | 14 +++++++-------
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 5ec22406c89..80e5a3635ba 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2461,11 +2461,6 @@ input[disabled] {
     cursor: not-allowed;
 }
 
-.custom-select {
-    width: auto;
-    max-width: 100%;
-}
-
 .fade.in {
     opacity: 1;
 }
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 57a91eb4c82..457ba46e4d2 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -23,8 +23,9 @@
 }
 
 .mform .d-flex {
-    .form-control,
-    .custom-select {
+    // Override the default bootstrap form-control width.
+    .form-control {
+        width: auto;
         max-width: 100%;
     }
     textarea.form-control {
@@ -40,6 +41,12 @@
     }
 }
 
+// Override the default bootstrap custom-select width.
+.custom-select {
+    width: auto;
+    max-width: 100%;
+}
+
 #jump-to-activity.custom-select {
     width: 100%;
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 316487b3062..73581e43621 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -25352,11 +25352,6 @@ input[disabled] {
   cursor: not-allowed;
 }
 
-.custom-select {
-  width: auto;
-  max-width: 100%;
-}
-
 .fade.in {
   opacity: 1;
 }
@@ -32851,8 +32846,8 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 4px;
 }
 
-.mform .d-flex .form-control,
-.mform .d-flex .custom-select {
+.mform .d-flex .form-control {
+  width: auto;
   max-width: 100%;
 }
 .mform .d-flex textarea.form-control {
@@ -32867,6 +32862,11 @@ body.path-question-type .mform fieldset.hidden {
   margin-right: 0;
 }
 
+.custom-select {
+  width: auto;
+  max-width: 100%;
+}
+
 #jump-to-activity.custom-select {
   width: 100%;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d28086a753b..18cd471340e 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -25352,11 +25352,6 @@ input[disabled] {
   cursor: not-allowed;
 }
 
-.custom-select {
-  width: auto;
-  max-width: 100%;
-}
-
 .fade.in {
   opacity: 1;
 }
@@ -32851,8 +32846,8 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 4px;
 }
 
-.mform .d-flex .form-control,
-.mform .d-flex .custom-select {
+.mform .d-flex .form-control {
+  width: auto;
   max-width: 100%;
 }
 .mform .d-flex textarea.form-control {
@@ -32867,6 +32862,11 @@ body.path-question-type .mform fieldset.hidden {
   margin-right: 0;
 }
 
+.custom-select {
+  width: auto;
+  max-width: 100%;
+}
+
 #jump-to-activity.custom-select {
   width: 100%;
 }