Improve the visuals for the search bar on tablets

Fixes #5490

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 1071ccccc1b4720e2e242b2120c378c5e80097bb..e04e537fc3372273cc727a0d7213021cecc52468 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -190,7 +190,7 @@ html[data-color-scheme="dark"] {
        @include screen-md-down {
                max-width: 100vw;
 
-               .pageHeaderPanel fa-icon[size="16"] {
+               .pageHeaderPanel fa-icon[size="16"]:not([name="magnifying-glass"]) {
                        display: none;
                }
        }
@@ -574,6 +574,14 @@ html[data-color-scheme="dark"] {
 }
 
 @include screen-sm-md {
+       .searchBarOpen .pageHeaderSearch {
+               text-align: right;
+       }
+
+       .pageHeaderSearch .pageHeaderSearchInputContainer {
+               display: inline-flex;
+       }
+
        .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchType {
                flex: 0 auto;
        }