Fixed button list visuals on mobile

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index a68a285d88236df88f9448689dfe3bbaf6f10b46..4287a23dbaf2f37011479fbc1c95d080d1a5c2fe 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -332,17 +332,35 @@ fieldset {
 }
 
 .contentFooter {
-       display: flex;
-       
-       > .paginationBottom {
-               flex: 0 0 auto;
-               margin-top: 20px;
+       @include large-screen-only {
+               display: flex;
+               
+               > .paginationBottom {
+                       flex: 0 0 auto;
+                       margin-top: 20px;
+               }
+               
+               > .contentFooterNavigation {
+                       flex: 1 1 auto;
+                       margin: 20px 0 0 20px;
+                       text-align: right;
+               }
        }
        
-       > .contentFooterNavigation {
-               flex: 1 1 auto;
-               margin: 20px 0 0 20px;
-               text-align: right;
+       @include small-screen-only {
+               > .contentFooterNavigation {
+                       margin-top: 20px;
+                       
+                       .button {
+                               display: block;
+                               padding: 7px 10px;
+                               text-align: center;
+                               
+                               &:not(:first-child) {
+                                       margin-top: 10px;
+                               }
+                       }
+               }
        }
 }
 

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index ed0c10046ed1a9cde38280286543cf6fe035c960..b8adc56af1dd5103a4233a8fd9c1515096fa848e 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -109,8 +109,24 @@ select {
                margin-top: 30px;
        }
        
-       > :not(:first-child) {
-               margin-left: 10px;
+       @include large-screen-only {
+               > :not(:first-child) {
+                       margin-left: 10px;
+               }
+       }
+       
+       @include small-screen-only {
+               > .button,
+               > button,
+               > input {
+                       display: block;
+                       padding: 7px 10px;
+                       width: 100%;
+                       
+                       &:not(:first-child) {
+                               margin-top: 10px;
+                       }
+               }
        }
 }