Fixed mobile view

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 5c51b60390f506e0b2c4a10d83117deff2ef21b7..1a97f717d88a1d63c42b1bfa0f9ddbd34a3fd716 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -17,14 +17,10 @@
 
 .pageHeader .layoutBoundary {
        display: flex;
-       padding-top: 20px;
-       padding-bottom: 20px;
        
        .pageHeaderContainerLeft,
        .pageHeaderContainerRight {
                display: flex;
-               flex-direction: column;
-               justify-content: space-between;
        }
        
        .pageHeaderContainerLeft {
@@ -34,15 +30,33 @@
        .pageHeaderContainerRight {
                flex: 0 0 auto;
        }
+       
+       @include large-screen-only {
+               padding-top: 20px;
+               padding-bottom: 20px;
+               
+               .pageHeaderContainerLeft,
+               .pageHeaderContainerRight {
+                       flex-direction: column;
+                       justify-content: space-between;
+               }
+       }
+       
+       @include small-screen-only {
+               height: 50px;
+               padding: 10px;
+       }
 }
 
 /* LOGO */
 .pageHeaderLogo {
-       margin-bottom: 15px;
-       
        .pageHeaderLogoSmall {
                display: none;
        }
+       
+       @include large-screen-only {
+               margin-bottom: 15px;
+       }
 }
 
 /* MAIN MENU */

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 1e8eb63350b446ba2464df02e329abd658efb7d6..4578e5b3138b580c456d42f19b9e6801661f0539 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -22,9 +22,11 @@
                > div {
                        height: 50px;
                        
-                       // remove padding, the vertical alignment is done using `align-items`
-                       padding-bottom: 0;
-                       padding-top: 0;
+                       @include large-screen-only {
+                               // remove padding, the vertical alignment is done using `align-items`
+                               padding-bottom: 0;
+                               padding-top: 0;
+                       }
                }
        }