From d65f9b5057c89dccb2cb6fe0246950d7fe5e5fcc Mon Sep 17 00:00:00 2001
From: kittentm <aidenplayzroblox123@gmail.com>
Date: Mon, 20 Jul 2026 20:14:17 +0200
Subject: [PATCH] chore: make header work better on mobile

---
 app/components/TheHeader.vue | 37 ++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/components/TheHeader.vue b/app/components/TheHeader.vue
index 44ef2ac..98c2a3f 100644
--- a/app/components/TheHeader.vue
+++ b/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>