feat(misc-pages): responsive for canceled game and not found game pag…

…es (#888)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Improved layout and styling for the Game Canceled and Game Not Found
pages, enhancing user experience.
- Responsive design adjustments for buttons, ensuring better usability
across mobile and desktop devices.
- Enhanced visual presentation of error messages with centered text and
improved font sizes.

- **Bug Fixes**
- Resolved alignment and spacing issues for buttons and text in various
components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/components/pages/game/GameCanceled/GameCanceled.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="game-canceled"
-    class="flex flex-col items-center justify-center"
+    class="flex flex-col gap-2 items-center justify-center"
   >
     <h1
       id="game-canceled-text"
@@ -17,12 +17,12 @@
       </span>
     </h1>
 
-    <div>
-      <PrimeVueDivider class="mb-4"/>
+    <PrimeVueDivider class="!w-2/3"/>
 
-      <CreateAnotherGameButton/>
+    <div class="flex flex-col gap-2 md:flex-row">
+      <CreateAnotherGameButton class="md:w-auto w-full"/>
 
-      <BackToHomeButton/>
+      <BackToHomeButton class="md:w-auto w-full"/>
     </div>
   </div>
 </template>

app/components/pages/game/GameNotFound/GameNotFound.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="game-not-found"
-    class="flex flex-col items-center justify-center"
+    class="flex flex-col gap-2 items-center justify-center"
   >
     <h1
       id="game-not-found-text"
@@ -12,17 +12,17 @@
         icon="fa-regular fa-question-circle"
       />
 
-      <span>
+      <span class="text-center">
         {{ $t("components.GameNotFound.gameNotFound") }}
       </span>
     </h1>
 
-    <div>
-      <PrimeVueDivider class="mb-4"/>
+    <PrimeVueDivider class="!w-2/3"/>
 
-      <CreateAnotherGameButton class="me-2"/>
+    <div class="flex flex-col gap-2 md:flex-row">
+      <CreateAnotherGameButton class="md:w-auto w-full"/>
 
-      <BackToHomeButton/>
+      <BackToHomeButton class="md:w-auto w-full"/>
     </div>
   </div>
 </template>

app/error.vue

@@ -5,7 +5,7 @@
   >
     <h1
       id="error-title"
-      class="!text-5xl"
+      class="!text-5xl text-center"
     >
       {{ errorTitle }}
     </h1>
@@ -20,7 +20,7 @@
 
     <h3
       id="error-description"
-      class="!text-2xl"
+      class="md:!text-2xl text-center text-xl"
     >
       {{ errorDescription }}
     </h3>