update mobile view and some bugs (#2836)

* Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black

* Refactoring css styles for header controls

* Change header responsive layout

* Change header responsive layout

* Fix scrollable columns for any header size

* Remove main content mobile spacing

* Change style for platform filters and labels

* Fix: add burger icon into dist

* Fix: long code token in mobile view

* Fix: color in filter selector

* Fix: long token in keyValue for desktop

* Fix: add spacing for iPad Mini

* Fix: dropdown for multiple versions

* update platform brand colors

* Fix: sample spacing, blockquote, playground initialize

* Safari fix outline for platform tags

* Fix non-js main content for better SEO

* Fix outline for safari browser

* Add consistent vertical spacing for header. It should normalize subpixel artifacts and centred content.

* Update manual for custom logo

* Add comment for playground

* Hide copy button for non-js user

* fix; use google fonts

* feat; change style for platform in platform-tags

* Revert Inter as defult font

* Add breaks for CONSTANTS

* incorrect non-js script position

* less specific selector for article links

1 files changed, 23 insertions, 13 deletions

diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 780ea6b3..ebb102d3 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -1,24 +1,34 @@
 $font-color: hsla(0, 0%, 100%, 0.8);
 $secondary-font-color: hsla(0, 0%, 100%, 0.6);
 
-.search {
-  button {
-    margin-top: 10px;
-
-    cursor: pointer;
+#pages-search {
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  fill: #fff;
+  fill: var(--dark-mode-and-search-icon-color);
+
+  &:focus {
+    outline: none;
+  }
 
-    border: none;
-    background: var(--color-dark);
-    fill: #fff;
-    fill: var(--dark-mode-and-search-icon-color);
+  &:hover {
+    background: var(--white-10);
+  }
+}
 
-    &:focus {
-      outline: none;
-    }
+.search {
+  &, [data-test="ring-select"], [data-test="ring-tooltip"], [data-test="ring-select_focus"], #pages-search {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+    line-height: 0;
   }
 }
 
-.search-hotkey-popup{
+.search-hotkey-popup {
   background-color: var(--background-color) !important;
   padding: 4px;
 }