feat: add z-index to searchbox, narrower on mobile

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