Merge pull request #4293 from ClickHouse/4228-improve-search-usability

Showing More Search Results, Expanding modal size

Author: Blargian

src/theme/SearchBar/index.js

@@ -27,6 +27,19 @@ function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
   const { siteMetadata, i18n: { currentLocale } } = useDocusaurusContext();
   const processSearchResultUrl = useSearchResultUrlProcessor();
   const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
+  const configFacetFilters = props.searchParameters?.facetFilters ?? [];
+  const facetFilters = contextualSearch
+      ? // Merge contextual search filters with config filters
+      mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
+      : // ... or use config facetFilters
+      configFacetFilters;
+  // We add clickAnalyics here
+  const searchParameters = {
+    ...props.searchParameters,
+    facetFilters,
+    clickAnalytics: true,
+    hitsPerPage: 10,
+  };
   const { isAskAIOpen, currentMode } = useAskAI();
   const history = useHistory();
   const searchButtonRef = useRef(null);

src/theme/SearchBar/styles.css

@@ -61,3 +61,25 @@
 .DocSearch-Logo {
   display: none !important;
 }
+
+.DocSearch-Dropdown { 
+  max-height: calc(min(90vh) - 180px) !important; 
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .DocSearch-Dropdown { 
+    max-height: calc(100vh - 120px) !important;
+    width: calc(100vw - 20px) !important;
+    left: 10px !important;
+    right: 10px !important;
+    position: fixed !important;
+    z-index: 9999 !important;
+  }
+  
+  .DocSearch-SearchBar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 10000 !important;
+  }
+}