diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 928c1febc88..2960fd2005e 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -342,6 +342,9 @@ select.form-control {
     &[size],
     &[multiple] {
         padding-right: 0;
+        option {
+            width: fit-content;
+        }
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index b6cd992c4a2..96cddc11d65 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -16618,6 +16618,8 @@ fieldset.coursesearchbox label {
 
 select.form-control[size], select.form-control[multiple] {
   padding-right: 0; }
+  select.form-control[size] option, select.form-control[multiple] option {
+    width: fit-content; }
 
 /* Non-bootstrap selects with a size show their contents outside of the element.
  * Remove when we update to stable bootstrap 4. (MDL-56511) */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index aba6377b368..ea10b215b26 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -16844,6 +16844,8 @@ fieldset.coursesearchbox label {
 
 select.form-control[size], select.form-control[multiple] {
   padding-right: 0; }
+  select.form-control[size] option, select.form-control[multiple] option {
+    width: fit-content; }
 
 /* Non-bootstrap selects with a size show their contents outside of the element.
  * Remove when we update to stable bootstrap 4. (MDL-56511) */