canceling [..vh]

app/src/components/header/GameHeaderComponents.vue

@@ -65,31 +65,22 @@ onMounted(async () => {
   <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
-      class="text-text-primary h-full w-full"
+      class="text-text-primary"
     />
   </a>
   <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
-    <font-awesome-icon
+    <font-awesome-icon :icon="['fas', 'trophy']" class="text-text-primary" />
-      :icon="['fas', 'trophy']"
-      class="text-text-primary h-full w-full"
-    />
   </RouterLink>
   <RouterLink title="Map" to="/map" class="h-5 w-5">
-    <font-awesome-icon
+    <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
-      :icon="['fas', 'map']"
-      class="text-text-primary h-full w-full"
-    />
   </RouterLink>
   <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
+    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
   </a>
   <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
     <font-awesome-icon
       :icon="['fas', 'arrow-right-from-bracket']"
-      class="text-text-primary h-full w-full"
+      class="text-text-primary"
     />
   </button>
 </template>

app/src/components/header/LandingHeaderComponents.vue

@@ -17,7 +17,7 @@ const scrollToSection = (sectionId) => {
 <template>
   <button
     id="Intro"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('intro')"
     style="font-size: 2vh"
   >
@@ -25,14 +25,14 @@ const scrollToSection = (sectionId) => {
   </button>
   <button
     id="Feature"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('feature')"
     style="font-size: 2vh"
   >
     特色</button
   ><button
     id="Info"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('about')"
     style="font-size: 2vh"
   >
@@ -41,7 +41,7 @@ const scrollToSection = (sectionId) => {
 
   <button
     id="Contact"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     @click="scrollToSection('contact')"
     style="font-size: 2vh"
   >
@@ -51,15 +51,12 @@ const scrollToSection = (sectionId) => {
     title="Sign In"
     id="SignIn"
     to="/register"
-    class="text-text inline-block font-bold whitespace-nowrap pt-1"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 hover:text-text-primary"
     style="font-size: 2vh"
   >
     登入
   </RouterLink>
   <a title="Bug Report" :href="bugReportUrl" target="_blank" class="h-5 w-5">
-    <font-awesome-icon
+    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
-      :icon="['fas', 'bug']"
-      class="text-text-primary h-full w-full"
-    />
   </a>
 </template>

app/src/views/GamePage.vue

@@ -46,7 +46,7 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="w-full h-[5vh]">
+  <div class="w-full">
     <HeaderPart
       :title="sessionStore.quest?.title"
       :headerComponent="GameHeaderComponents"
@@ -59,7 +59,7 @@ onMounted(async () => {
     :value="sessionStore.session.status"
   />
   <!-- main -->
-  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-full pt-10 w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
     <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">

app/src/views/LeaderboardPage.vue

@@ -36,7 +36,7 @@ onMounted(async () => {
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="h-[6vh] w-full">
+      <div class="w-full">
         <HeaderPart :title="排行榜" :headerComponent="GameHeaderComponents" />
       </div>
       <div class="w-fit h-[94vh] m-3">

app/src/views/QuestMapPage.vue

@@ -5,7 +5,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>
-  <div class="w-fit h-[5vh]">
+  <div class="w-fit">
     <HeaderPart
       :title="關卡地圖"
       :headerComponent="GameHeaderComponents"
@@ -19,7 +19,7 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
       Quest Map
       Unix編年史
     </p> -->
-  <div class="flex flex-col justify-center items-center w-full h-[95vh]">
+  <div class="flex flex-col justify-center items-center w-full h-full mt-8">
     <QuestMap />
   </div>
 </template>

app/src/views/RegisterPage.vue

@@ -94,7 +94,7 @@ async function check({
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <HeaderPart />
-      <div class="w-fit h-[91vh]">
+      <div class="w-fit mt-8">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"