add z-index to searchbox, narrower on mobile

leanprover · Jan 12, 2025 · 21d8097 · 21d8097
1 parent 7ec1603
commit 21d8097
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/static/search/search-box.css b/static/search/search-box.css
@@ -1,9 +1,16 @@
 :root {
   --selected-color: #def;
+  --search-bar-width: 12rem;
+}
+
+@media screen and (max-width: 768px) {
+  :root {
+    --search-bar-width: 24rem;
+  }
 }
 
 #search-wrapper {
-  align-self: flex-end;
+  z-index: 1;
 }
 
 #search-wrapper .combobox-list {
@@ -29,7 +36,7 @@
 }
 
 #search-wrapper .combobox input {
-  width: 24rem;
+  width: var(--search-bar-width);
   outline: none;
   font-size: .9rem;
   padding: .3rem .5rem;
@@ -46,7 +53,7 @@
   padding: 0;
   position: absolute;
   top: calc(100%);
-  width: 24rem;
+  width: var(--search-bar-width);
   list-style: none;
   background-color: white;
   display: none;