Cosmetic fix for search page on small screens

easyops-cn · Feb 17, 2023 · e93fda9 · e93fda9
1 parent f63b682
commit e93fda9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/docusaurus-search-local/src/client/theme/SearchPage/SearchPage.module.css b/docusaurus-search-local/src/client/theme/SearchPage/SearchPage.module.css
@@ -1,4 +1,4 @@
-.searchVersionInput,
+.searchContextInput,
 .searchQueryInput {
   border-radius: var(--ifm-global-radius);
   border: var(--ifm-global-border-width) solid
@@ -30,3 +30,24 @@
   font-style: italic;
   margin: 0.5rem 0px 0px;
 }
+
+@media only screen and (max-width: 996px) {
+  .searchQueryColumn {
+    max-width: 60% !important;
+  }
+
+  .searchContextColumn {
+    max-width: 40% !important;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .searchQueryColumn {
+    max-width: 100% !important;
+  }
+
+  .searchContextColumn {
+    max-width: 100% !important;
+    padding-left: var(--ifm-spacing-horizontal) !important;
+  }
+}
diff --git a/docusaurus-search-local/src/client/theme/SearchPage/SearchPage.tsx b/docusaurus-search-local/src/client/theme/SearchPage/SearchPage.tsx
@@ -133,7 +133,8 @@ function SearchPageContent(): React.ReactElement {
 
         <div className="row">
           <div
-            className={clsx("col", styles.searchQueryColumn, {
+            className={clsx("col", {
+              [styles.searchQueryColumn]: Array.isArray(searchContextByPaths),
               "col--9": Array.isArray(searchContextByPaths),
               "col--12": !Array.isArray(searchContextByPaths),
             })}
@@ -155,12 +156,12 @@ function SearchPageContent(): React.ReactElement {
                 "col",
                 "col--3",
                 "padding-left--none",
-                styles.searchVersionColumn
+                styles.searchContextColumn
               )}
             >
               <select
                 name="search-context"
-                className={styles.searchVersionInput}
+                className={styles.searchContextInput}
                 id="context-selector"
                 value={searchContext}
                 onChange={(e) => updateSearchContext(e.target.value)}