Valeriia's feedback on top_controls spacing

Author: tzi

plugins/CoreHome/stylesheets/layout.less

@@ -141,10 +141,9 @@ nav {
     width: calc(~'100% - 224px - 18px');  // 100% - menu width - pageWrap margin
   }
 
-  &>.top_controls {
-    .icon-arrowup:before, .icon-arrowdown:before {
-      padding: 17px 0 0 0;
-      display: inline-block;
+  & > .top_controls {
+    .icon-arrowup:before,
+    .icon-arrowdown:before {
       cursor: pointer;
 
       @media screen and (max-width: 600px) {
@@ -170,34 +169,18 @@ nav {
   }
 
   @media all and (max-width: 600px) {
-    .top_controls {
-      height: auto;
-
-      .piwikTopControl {
-        float: none;
-        margin: 0 23px 10px 17px !important;
-        display: block !important;
+    .piwikSelector {
+      > a.title {
+          max-width: none;
       }
+    }
 
-      .piwikSelector {
-        > a.title {
-            max-width: none;
-        }
-      }
-
-      .quick-access {
-        width: auto !important;
-
-        input {
-          padding-left: 15px !important;
-        }
+    .quickAccessInside {
+      flex: auto;
+    }
 
-        .icon-search {
-          position: absolute;
-          left: unset;
-          right: 36px;
-        }
-      }
+    .quick-access {
+      width: auto !important;
     }
   }
 
@@ -435,7 +418,7 @@ nav {
     opacity: 0;
     padding-left: 16px;
 
-    @media screen and (max-width: 600px){
+    @media screen and (max-width: 600px) {
       visibility: hidden;
       opacity: 0;
       padding-left: 0;
@@ -444,13 +427,13 @@ nav {
     .quick-access {
       position: absolute;
       width: 208px;
-      margin-left: 0;
+      margin-right: 8px;
 
-      @media screen and (max-width: 600px){
+      @media screen and (max-width: 600px) {
         z-index: 1000;
         position: absolute;
         width: 208px;
-        margin-left: 16px;
+        margin-right: 0;
       }
 
       .dropdown {
@@ -473,11 +456,6 @@ nav {
         color: #a9a9a9;
       }
     }
-
-    .piwikTopControl {
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
   }
 }
 
@@ -500,20 +478,27 @@ nav {
 
 #root, #standalone {
   .top_controls {
-    min-height: 51px;
     position: relative;
-    background-color: @theme-color-background-base;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+
     height: auto;
-    margin-bottom: 8px;
-    margin-top: 8px;
+    min-height: 51px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+
+    @media all and (max-width: 600px) {
+      flex-direction: column;
+      align-items: stretch;
+      padding: 0 23px 0 17px;
+    }
 
     .piwikTopControl {
-      display: inline-block;
-      float: none;
       position: relative;
-      margin-right: 14px;
-      vertical-align: top;
-      font-size: 11px;
+      font-size: 14px;
     }
   }
 }
@@ -548,9 +533,9 @@ nav {
       width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
     }
 
-    .top_controls{
+    .top_controls {
       .quick-access {
-      display: none !important;
+        display: none !important;
       }
     }
   }

plugins/CoreHome/stylesheets/selector.less

@@ -17,7 +17,7 @@
 
 .piwikSelector {
   position: relative;
-  display: flex;
+  display: inline-flex;
   border: @_selector-button_border;
   border-radius: @_selector-button_border-radius;
   box-shadow: @_selector-button_box-shadow;

plugins/CoreHome/templates/_headerMessage.twig

@@ -33,7 +33,6 @@
 ></div>
 
 <span class="icon icon-arrowup"></span>
-<div style="clear:right"></div>
 {% else %}
 <span class="icon icon-arrowup"></span>
 {% endif %}

plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.less

@@ -8,10 +8,6 @@
 
   @media all and (max-width: 600px) { /* 1120px + padding */
     min-height: auto;
-
-    .piwikTopControl {
-      margin: 0 !important;
-    }
   }
 
   .row {

plugins/SegmentEditor/stylesheets/segmentation.less

@@ -198,6 +198,7 @@ div.scrollable {
 }
 
 .segmentEditorPanel .segmentListContainer {
+    flex: auto;
     line-height: 14px;
 }