diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index 743ea73a74d2..d2b64f98a831 100644
--- 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
index 780f618f77da..cbfb5347e88d 100644
--- 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;
 }