Minor CSS fixes for Toolbar and Searchfiled, especially on mobile and…

… on Safari (#86)
FriendsOfFlarum · Jan 27, 2022 · 0f58c26 · 0f58c26
1 parent 0a512bd
commit 0f58c26
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/resources/less/components/SearchFiled.less b/resources/less/components/SearchFiled.less
@@ -6,6 +6,10 @@
     position: relative;
     margin-left: 15px; // Space with sort dropdown
 
+    @media @phone {
+        margin-left: 0;
+    }
+
     // Same background as .focus to give it better visibility
     background-color: @body-bg;
     color: @text-color;
@@ -15,6 +19,7 @@
         display: inline;
         outline: none;
         margin-top: -2px;
+        margin-bottom: -2px;
         border: 0 !important;
         padding: 0;
         width: 100%;

diff --git a/resources/less/components/toolbar.less b/resources/less/components/toolbar.less
@@ -1,4 +1,8 @@
 .User--directory .IndexPage-toolbar {
+    .IndexPage-toolbar-view {
+        display: inline-flex;
+    }
+
     @media @phone {
         display: flex;
         flex-direction: column;
@@ -79,3 +83,18 @@
         margin-bottom: 5px;
     }
 }
+
+@media @tablet-up {
+    .IndexPage-toolbar-action {
+        .item-clarkwinkelmann-mailing {
+            .Button {
+                & > .Button-icon {
+                    margin-right: 0;
+                }
+                & > .Button-label {
+                    display: none;
+                }
+            }
+        }
+    }
+}