refactor(v2): increase search input on medium screens

facebook · May 23, 2020 · f894133 · f894133
1 parent 2499de7
commit f894133
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -35,6 +35,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
         openOnFocus: true,
         autoselect: false,
         hint: false,
+        tabAutocomplete: false,
       },
       // Override algolia's default selection event, allowing us to do client-side
       // navigation and avoiding a full page refresh.

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
@@ -9,6 +9,13 @@
   display: none;
 }
 
+@media (min-width: 769px) and (max-width: 996px) {
+  :global(.navbar__search),
+  :global(.navbar__search-input) {
+    width: 100%;
+  }
+}
+
 @media (max-width: 768px) {
   .searchIconButton {
     display: block;
@@ -53,10 +60,10 @@
   .searchInputExpanded {
     width: 100%;
   }
+}
 
-  :global(.algolia-autocomplete) {
-    width: 100%;
-    display: flex !important;
-    justify-content: flex-end;
-  }
+:global(.algolia-autocomplete) {
+  width: 100%;
+  display: flex !important;
+  justify-content: flex-end;
 }