fix header justify end property

app/src/components/header/GameHeaderComponents.vue

@@ -57,30 +57,53 @@ onMounted(async () => {
         </button> -->
   <p
     id="UsernameText"
-    class="text-text inline-block whitespace-nowrap"
+    class="text-text inline-block whitespace-nowrap px-1.5"
     style="font-size: 2vh"
   >
     {{ userProfileStore.username }}
   </p>
-  <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
+  <a
+    title="Survey"
+    :href="surveyUrl"
+    target="_blank"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
-      class="text-text-primary"
+      class="text-text-primary inline"
     />
+    <span class="text-text sm:hidden px-2">Survey</span>
   </a>
-  <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
+  <RouterLink
+    title="LeaderBoard"
+    to="/leaderboard"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon :icon="['fas', 'trophy']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Leader Board</span>
   </RouterLink>
-  <RouterLink title="Map" to="/map" class="h-5 w-5">
+  <RouterLink title="Map" to="/map" class="md:h-5 md:w-5 px-1.5 w-auto">
     <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Map</span>
   </RouterLink>
-  <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
+  <a
+    title="Bug Report"
+    :href="bugReportUrl"
+    target="_blank"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+    <span class="text-text sm:hidden px-2">Bug Report</span>
   </a>
-  <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
+  <button
+    title="Sign Out"
+    @click="handleLogout"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
     <font-awesome-icon
       :icon="['fas', 'arrow-right-from-bracket']"
       class="text-text-primary"
     />
+    <span class="text-text sm:hidden px-2">Sign Out</span>
   </button>
 </template>

app/src/components/header/HeaderPart.vue

@@ -18,7 +18,7 @@ const toggleMenu = () => {
 </script>
 <template>
   <div
-    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center sm:justify-start"
+    class="w-full top-0 px-5 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
   >
     <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
@@ -38,14 +38,14 @@ const toggleMenu = () => {
       </p>
     </div>
     <div
-      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:flex-row sm:block sm:ml-6"
+      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:block sm:ml-6"
       :class="{ hidden: !menuOpen }"
     >
       <component :is="headerComponent" />
     </div>
     <button
       type="button"
-      class="flex items-center justify-end h-5 w-5 rounded-md sm:hidden"
+      class="flex items-center h-5 w-5 rounded-md sm:hidden"
       aria-controls="mobile-menu"
       aria-expanded="false"
       @click="toggleMenu"