Update the button order in the form submit controls

See https://www.woltlab.com/community/thread/301124-buttons-im-melden-dialog-falsch-herum/?postID=1935376#post1935376

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index dd745f407be8e63df77f550199351a3b172256fa..c6f38e08cf092fb8d41782cd853d4c0343073de7 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -108,26 +108,26 @@ select {
 }
 
 .formSubmit {
-       text-align: center;
+       display: flex;
+       flex-direction: row-reverse;
+       flex-wrap: wrap;
+       gap: 10px;
+       justify-content: center;
 
        &:not(:first-child) {
                margin-top: 30px;
        }
+}
 
-       /* the `margin-bottom` styles are required to deal with buttons wrapping
-          into the next row, also requires some changes to `.dialogFormSubmit`! */
-       margin-bottom: -10px;
-
-       > input[type="button"],
-       > input[type="reset"],
-       > input[type="submit"],
-       > .button,
-       > a.button {
-               margin-bottom: 10px;
-       }
-
-       > :not(:first-child) {
-               margin-left: 10px;
+@include screen-xs {
+       .formSubmit {
+               input[type="button"],
+               input[type="reset"],
+               input[type="submit"],
+               .button,
+               a.button {
+                       flex: 1;
+               }
        }
 }
 
@@ -284,7 +284,9 @@ html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
                left: 0;
                position: absolute;
                top: 0;
-               transition: background-color 0.12s linear, width 0.12s linear;
+               transition:
+                       background-color 0.12s linear,
+                       width 0.12s linear;
                width: 0;
        }
 

diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 2d9e26a1a08222496a00798aeae0aba93ce2ea9a..6dbeaa8d8f1007ce55ef06d01b9429a547674249 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -129,21 +129,6 @@
        }
 }
 
-@include screen-xs {
-       .messageTabMenu + .formSubmit,
-       .messageFooter .formSubmit {
-               column-gap: 10px;
-               display: grid;
-               grid-auto-columns: 1fr;
-               grid-auto-flow: column;
-
-               .button {
-                       margin-left: 0;
-                       margin-right: 0;
-               }
-       }
-}
-
 /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
    and the next element, similar to gaps with display: inline-block and font-size > 0 */
 @-moz-document url-prefix() {