Fix search on mobile

The input was hidden on small screens but the search icon was still there which was confusing. This adds the input back and adjusts the results' dropdown accordingly.
Kong · Nov 3, 2023 · 1475cce · 1475cce
1 parent 5a15a76
commit 1475cce
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 6 deletions.
diff --git a/app/_assets/stylesheets/header-v2.less b/app/_assets/stylesheets/header-v2.less
@@ -306,10 +306,6 @@ header.navbar-v2 {
         &::placeholder {
           color: @color-text-light;
         }
-
-        @media (max-width: 1100px) {
-          display: none;
-        }
       }
     }
 
@@ -674,7 +670,6 @@ header.navbar-v2 {
         min-height: calc(100vh - 60px);
         transform: translateY(-120%);
         background: white center no-repeat;
-        background-image: url("/assets/images/icons/icn-search.svg");
         z-index: -100;
         transition: transform 0.25s;
       }

diff --git a/app/_includes/nav-v2.html b/app/_includes/nav-v2.html
@@ -168,7 +168,6 @@
   </div>
 </header>
 
-{% if include.layout != "landing-page" %}
 <style>
   @media (max-width: 768px) {
     .algolia-docsearch-suggestion--subcategory-column {
@@ -190,6 +189,7 @@
   }
 </style>
 
+{% if include.layout != "landing-page" %}
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
 
 <script type="text/javascript">