chore: make header work better on mobile

app/components/TheHeader.vue

@@ -15,7 +15,7 @@
         <a href="#">{{ t.nav?.supportedGames }}</a>
         <a href="#">{{ t.nav?.errorCodes }}</a>
         <a href="#">{{ t.nav?.discordServer }}</a>
-        <a href="#">{{ t.nav?.installSpbr }}</a>
+        <a href="/docs/connect">{{ t.nav?.installSpbr }}</a>
       </nav>
 
       <div class="search-box">
@@ -69,6 +69,8 @@ const { t } = useLocale()
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
+  gap: 15px;
+  flex-wrap: wrap;
 }
 
 .logo img {
@@ -80,6 +82,7 @@ const { t } = useLocale()
 .links {
   display: flex;
   gap: 25px;
+  flex-wrap: wrap;
 }
 
 .links a {
@@ -101,6 +104,8 @@ const { t } = useLocale()
   border: 1px solid #444;
   border-radius: 20px;
   padding: 4px 12px;
+  flex-grow: 1;
+  max-width: 300px;
 }
 
 .search-box input {
@@ -110,7 +115,7 @@ const { t } = useLocale()
   font-size: 14px;
   color: #eee;
   background: transparent;
-  width: 150px;
+  width: 100%;
 }
 
 .search-btn {
@@ -136,4 +141,32 @@ const { t } = useLocale()
   color: #fff;
   transform: scale(1.1);
 }
+
+@media (max-width: 768px) {
+  .container {
+    justify-content: space-between;
+  }
+
+  .links {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 10px;
+  }
+
+  .search-box {
+    max-width: 180px;
+  }
+}
+
+@media (max-width: 480px) {
+  .links {
+    display: none;
+  }
+
+  .search-box {
+    max-width: 60%;
+  }
+}
 </style>