Fix backend template blog layout setting fields overflow (#35823)

* Scale up mobile break point and add extra grid span

* Make label 100% width when stacked

* Make fields wider

Author: RickR2H

administrator/templates/atum/scss/blocks/_form.scss

@@ -47,7 +47,10 @@
   .form-vertical & {
     flex-direction: column;
   }
+}
 
+.stack .control-label {
+  width: 100%;
 }
 
 .spacer {

administrator/templates/atum/scss/blocks/_utilities.scss

@@ -46,16 +46,9 @@
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(xxl) {
     --span-3: span 3;
     --span-4: span 4;
-    --span-5: span 4;
-
-    grid-template-columns: repeat(4, 1fr);
-    grid-gap: 1rem 2rem;
-  }
-
-  @include media-breakpoint-up(lg) {
     --span-5: span 5;
 
     grid-template-columns: repeat(6, 1fr);
@@ -81,7 +74,11 @@
     grid-column: 1 / var(--span-2);
 
     &-inline {
-      grid-column: var(--span-2);
+      grid-column: var(--span-1);
+
+      @include media-breakpoint-up(xxl) {
+        grid-column: var(--span-2);
+      }
     }
   }
 

components/com_content/tmpl/category/blog.xml

@@ -222,7 +222,7 @@
 				name="multi_column_order"
 				type="list"
 				label="JGLOBAL_MULTI_COLUMN_ORDER_LABEL"
-				parentclass="stack span-1-inline"
+				parentclass="stack span-2-inline"
 				useglobal="true"
 				validate="options"
 				>

components/com_content/tmpl/featured/default.xml

@@ -80,7 +80,7 @@
 				name="multi_column_order"
 				type="list"
 				label="JGLOBAL_MULTI_COLUMN_ORDER_LABEL"
-				parentclass="stack span-1-inline"
+				parentclass="stack span-2-inline"
 				useglobal="true"
 				validate="options"
 				>