From 64fb0a95877d31e29c5c2c22f12be8dbda3bb32a Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Thu, 24 Jun 2021 12:16:48 +0200
Subject: [PATCH] MDL-71947 theme_boost: fix styles for vertical forms

---
 lib/form/templates/element-template.mustache |  2 +-
 theme/boost/scss/moodle/forms.scss           | 16 +++++++++++++++-
 theme/boost/style/moodle.css                 | 12 +++++++++++-
 theme/classic/style/moodle.css               | 12 +++++++++++-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/lib/form/templates/element-template.mustache b/lib/form/templates/element-template.mustache
index b77408b761d..8f6097f25cc 100644
--- a/lib/form/templates/element-template.mustache
+++ b/lib/form/templates/element-template.mustache
@@ -56,7 +56,7 @@
                 </span>
             {{/element.staticlabel}}
         {{/ label }}{{/ label}}
-        <div class="ml-1 ml-md-auto d-flex align-items-center align-self-start">
+        <div class="form-label-addon d-flex align-items-center align-self-start">
             {{#required}}
                 <div class="text-danger" title="{{#str}}required{{/str}}">
                 {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 2960fd2005e..11b5e7e50e1 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -371,7 +371,8 @@ textarea[data-auto-rows] {
         margin-right: 0;
         & > .col-md-3,
         & > .col-md-9 {
-            float: none;
+            flex: 0 0 100%;
+            max-width: 100%;
             width: inherit;
             padding-right: 0;
             padding-left: 0;
@@ -379,6 +380,19 @@ textarea[data-auto-rows] {
         &.femptylabel > .col-md-3 {
             display: none;
         }
+        .form-control {
+            width: 100%;
+        }
+    }
+}
+
+.mform .col-form-label .form-label-addon {
+    margin-left: 0.25rem;
+}
+
+@include media-breakpoint-up(sm) {
+    .mform:not(.full-width-labels) .col-form-label .form-label-addon {
+        margin-left: auto;
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 86e2e66fd0b..cb6bcdb7ff6 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -16677,12 +16677,22 @@ textarea[data-auto-rows] {
   margin-right: 0; }
   .mform.full-width-labels .fitem.row > .col-md-3,
   .mform.full-width-labels .fitem.row > .col-md-9 {
-    float: none;
+    flex: 0 0 100%;
+    max-width: 100%;
     width: inherit;
     padding-right: 0;
     padding-left: 0; }
   .mform.full-width-labels .fitem.row.femptylabel > .col-md-3 {
     display: none; }
+  .mform.full-width-labels .fitem.row .form-control {
+    width: 100%; }
+
+.mform .col-form-label .form-label-addon {
+  margin-left: 0.25rem; }
+
+@media (min-width: 576px) {
+  .mform:not(.full-width-labels) .col-form-label .form-label-addon {
+    margin-left: auto; } }
 
 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
 @media (min-width: 768px) {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index e1996867e56..a112bd9abff 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -16911,12 +16911,22 @@ textarea[data-auto-rows] {
   margin-right: 0; }
   .mform.full-width-labels .fitem.row > .col-md-3,
   .mform.full-width-labels .fitem.row > .col-md-9 {
-    float: none;
+    flex: 0 0 100%;
+    max-width: 100%;
     width: inherit;
     padding-right: 0;
     padding-left: 0; }
   .mform.full-width-labels .fitem.row.femptylabel > .col-md-3 {
     display: none; }
+  .mform.full-width-labels .fitem.row .form-control {
+    width: 100%; }
+
+.mform .col-form-label .form-label-addon {
+  margin-left: 0.25rem; }
+
+@media (min-width: 576px) {
+  .mform:not(.full-width-labels) .col-form-label .form-label-addon {
+    margin-left: auto; } }
 
 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
 @media (min-width: 768px) {