fix(styles): fix mobile styles for pagefind search input

Author: timmywil

public/css/index.css

@@ -254,7 +254,7 @@ header {
   height: 186px;
   display: flex;
   flex-wrap: wrap;
-  padding: 0 20px;
+  padding: 0 1.5rem;
 }
 header h1 {
   text-transform: uppercase;
@@ -500,7 +500,7 @@ a.ext-link .icon {
     left: 0;
     right: 0;
     background-color: var(--nav-background-color);
-    z-index: 1;
+    z-index: 5;
     transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
     transform: translateX(100%);
     opacity: 0;
@@ -519,7 +519,7 @@ a.ext-link .icon {
     font-size: 1rem;
   }
   header {
-    padding: 0 40px;
+    padding: 0 2.5rem;
   }
   .nav {
     flex-direction: row;

public/css/search.css

@@ -3,8 +3,11 @@
 }
 
 #search {
-  width: 100%;
   position: relative;
+  /* Leave space for the :before label, search icon, and gap */
+  width: calc(100% - 85px - 22px - 1rem);
+  margin-right: 22px;
+  align-self: flex-end;
 }
 #search:before {
   content: 'Search Tickets';
@@ -115,7 +118,6 @@
 @media(min-width: 920px) {
   #search {
     width: auto;
-    margin-right: 22px;
   }
   .pagefind-ui__search-input {
     width: 300px;