responsive stuff

dist/app.css

@@ -12335,6 +12335,11 @@ input, label, textarea {
   align-items: center;
   gap: 1rem;
 }
+@media (max-width: 575.98px) {
+  .top-bar a.account-button {
+    gap: 0.5rem;
+  }
+}
 
 .main-nav {
   padding: 2rem 0;

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=8af0c9c0d989b79afe124f8138dc1a63",
-    "/app.css": "/app.css?id=9c6c128de14d4fb5a3e1c5ce08e8ba82"
+    "/app.css": "/app.css?id=d8bec67f6e619178d3aafac5d20b9855"
 }

src/scss/header.scss

@@ -22,6 +22,10 @@
         display: flex;
         align-items: center;
         gap: 1rem;
+
+        @include media-breakpoint-down(sm) {
+            gap: 0.5rem;
+        }
     }
 }
 

tpl/header.tpl

@@ -19,7 +19,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <div class="d-flex gap-5 justify-content-end">
+                <div class="d-flex gap-3 gap-md-5 justify-content-end align-items-center">
                     <form action="/">
                         <input type="text" name="s" placeholder="What are you searching for?" value="{{ searchTerm }}" />
                     </form>