Improved mobile page menu / page header

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index e2fc42e2c9a3857030fb71059136e58d7657dea3..4dd8994015c4c8f89206fa00269f155394f397f6 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -164,13 +164,22 @@
                .pageHeaderSearchInputContainer {
                        border-radius: 0;
                        display: flex;
+                       flex-wrap: wrap;
                        
-                       .pageHeaderSearchType > .button {
-                               border-radius: 0;
+                       .pageHeaderSearchType {
+                               flex: 0 0 100%;
+                               margin-bottom: 3px;
                                
-                               // input field is larger on iOS
-                               align-items: center;
-                               display: flex;
+                               > .button {
+                                       border-radius: 0;
+                                       max-width: unset;
+                                       min-width: unset;
+                                       width: 100%;
+                                       
+                                       // input field is larger on iOS
+                                       align-items: center;
+                                       display: flex;
+                               }
                        }
                        
                        .pageHeaderSearchInput {

diff --git a/wcfsetup/install/files/style/ui/menuMobile.scss b/wcfsetup/install/files/style/ui/menuMobile.scss
index bdaf463fd217b2c38d68935de0c256e538407f43..354394ac5295b6260d9d0315a9494c4dc3053e1f 100644 (file)
--- a/wcfsetup/install/files/style/ui/menuMobile.scss
+++ b/wcfsetup/install/files/style/ui/menuMobile.scss
@@ -122,8 +122,6 @@
        justify-content: flex-end;
        
        > .menuOverlayItemLink {
-               align-items: center;
-               display: flex;
                flex: 1 1 auto;
        }
 }
@@ -182,7 +180,9 @@
 }
 
 .menuOverlayItemLink {
+       align-items: center;
        background-color: rgb(44, 62, 80);
+       display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -191,6 +191,10 @@
                color: #fff;
        }
        
+       &:hover {
+               color: rgb(255, 255, 255);
+       }
+       
        /* wrapper class for links containing an additional badge */
        &.menuOverlayItemBadge {
                align-items: center;
@@ -269,7 +273,7 @@
        font-family: FontAwesome;
        font-size: 18px;
        position: absolute;
-       left: 10px;
+       left: 12px;
        top: 50%;
        transform: translateY(-50%);
 }