fix the rtl search bar view (#1177)

docs/src/components/Header/LanguageSelect.css

@@ -3,7 +3,7 @@
   width: 48px;
   box-sizing: border-box;
   margin: 0;
-  padding: 0.33em 0.5em;
+  padding: 0.33em 2rem;
   overflow: visible;
   font-weight: 500;
   font-size: 1rem;
@@ -21,8 +21,6 @@
   transition-duration: 0.2s;
   transition-property: border-color, color;
   -webkit-font-smoothing: antialiased;
-  padding-left: 30px;
-  padding-right: 1rem;
   -webkit-appearance: none;
 }
 .language-select-wrapper .language-select:hover,

docs/src/components/Header/Search.css

@@ -3,6 +3,18 @@
   --docsearch-primary-color: var(--theme-accent);
   --docsearch-logo-color: var(--theme-text);
 }
+
+.DocSearch-Modal .DocSearch-Hit a {
+  box-shadow: none;
+  border: 1px solid var(--theme-accent);
+}
+
+
+/** Style Search Bar */
+.search-placeholder {
+  flex-grow: 1;
+  text-align: initial;
+}
 .search-input {
   flex-grow: 1;
   box-sizing: border-box;
@@ -40,9 +52,6 @@
   color: var(--theme-text-light);
 }
 .search-hint {
-  position: absolute;
-  top: 7px;
-  right: 19px;
   padding: 3px 5px;
   display: none;
   display: none;
@@ -65,12 +74,3 @@
     display: flex;
   }
 }
-
-/* ------------------------------------------------------------ *\
-	DocSearch (Algolia)
-\* ------------------------------------------------------------ */
-
-.DocSearch-Modal .DocSearch-Hit a {
-  box-shadow: none;
-  border: 1px solid var(--theme-accent);
-}

docs/src/components/Header/Search.tsx

@@ -51,7 +51,7 @@ export default function Search() {
             strokeLinejoin="round"
           />
         </svg>
-        <span>Search</span>
+        <span className="search-placeholder">Search</span>
         <span className="search-hint">
           <span className="sr-only">Press </span>
           <kbd>/</kbd>