Fixed selectors hugging left side of browser and search bar icon moving in Responsive View (#12470)

* Fixed top controls in Responsive View, fixed search bar icon moving

* fix typo

* Update layout.less

1 files changed, 19 insertions, 5 deletions

diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
index e21c560963..8e15273267 100644
--- a/plugins/CoreHome/stylesheets/layout.less
+++ b/plugins/CoreHome/stylesheets/layout.less
@@ -90,7 +90,7 @@ nav {
 #root {
 
   .pageWrap {
-    padding-left: 19px;
+    padding-left: 16px;
     padding-right: 16px;
   }
 
@@ -117,7 +117,7 @@ nav {
       .piwikTopControl {
         position: static !important;
         float: none;
-        margin: 0 23px 10px 20px !important;
+        margin: 0 23px 10px 17px !important;
         display: block !important;
       }
 
@@ -292,16 +292,30 @@ nav {
 
 #root {
   .top_controls {
-
     visibility: hidden;
     opacity: 0;
     z-index: 45;
+    padding-left: 16px;
+
+    @media screen and (max-width: 600px){
+      visibility: hidden;
+      opacity: 0;
+      z-index: 45;
+      padding-left: 0;
+    }
 
     .quick-access {
       z-index: 1000;
       position: absolute;
       width: 208px;
-      margin-left: 16px;
+      margin-left: 0;
+
+      @media screen and (max-width: 600px){
+        z-index: 1000;
+        position: absolute;
+        width: 208px;
+        margin-left: 16px;
+      }
 
       .dropdown {
         width: 209px;
@@ -340,7 +354,7 @@ nav {
       display: inline-block;
       float: none;
       position: relative;
-      margin-right: 16px;
+      margin-right: 12px;
       vertical-align: top;
       font-size: 11px;
     }