feat(game): game over screens are responsive (#883)

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

## Summary by CodeRabbit

- **New Features**
- Enhanced responsive design for the Game Over actions and victory text
components, adapting layouts and image sizes based on screen size.
- The Game Over Create New Game button now occupies full width for
improved usability.

- **Bug Fixes**
- Improved accessibility by adjusting heading levels in the Game Over
Victory Text component.

- **Tests**
- Added tests to verify responsive behavior of the trophy icon in the
Game Over Victory Text component.

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

app/components/pages/game/GameOver/GameOverActions/GameOverActions.vue

@@ -1,9 +1,11 @@
 <template>
   <div
     id="game-over-actions"
-    class="flex gap-8 justify-center w-full"
+    class="flex flex-col gap-2 justify-center md:flex-row md:gap-8 w-full"
   >
-    <GameOverCreateNewGameButton id="game-over-create-new-game-button"/>
+    <GameOverCreateNewGameButton
+      id="game-over-create-new-game-button"
+    />
 
     <PrimeVueButton
       id="show-game-history-button"

app/components/pages/game/GameOver/GameOverActions/GameOverCreateNewGameButton/GameOverCreateNewGameButton.vue

@@ -26,7 +26,7 @@
     <PrimeVueButton
       id="create-new-game-button"
       ref="createNewGameButton"
-      class="p-button p-button-raised"
+      class="p-button p-button-raised w-full"
       :label="$t('components.GameOverActions.createAnotherGame')"
       @click="onClickFromCreateNewGameButton"
     >

app/components/pages/game/GameOver/GameOverVictoryText/GameOverVictoryText.vue

@@ -6,18 +6,18 @@
     <div class="flex gap-2 items-center justify-center">
       <NuxtImg
         :alt="$t('components.GameOverVictoryText.trophyImageAlt')"
-        height="125"
+        :height="svgSize"
         placeholder="/svg/misc/infinite-spinner.svg"
         src="svg/misc/trophy.svg"
-        width="125"
+        :width="svgSize"
       />
 
       <NuxtImg
         :alt="$t('components.GameOverVictoryText.victoryTypeImageAlt')"
-        height="125"
+        :height="svgSize"
         placeholder="/svg/misc/infinite-spinner.svg"
         :src="victoryTypeTextsAndSvg.svgPath"
-        width="125"
+        :width="svgSize"
       />
     </div>
 
@@ -28,24 +28,31 @@
       {{ victoryTypeTextsAndSvg.text }}
     </h1>
 
-    <h3 id="victory-sub-text">
+    <h4 id="victory-sub-text">
       {{ victoryTypeTextsAndSvg.subText }}
-    </h3>
+    </h4>
   </div>
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 
 import { VICTORY_TYPES_TEXTS_AND_SVG } from "~/components/pages/game/GameOver/GameOverVictoryText/game-over-victory-text.constants";
 import { useGameStore } from "~/stores/game/useGameStore";
+import { BreakpointTypes } from "~/utils/enums/breakpoint.enums";
 
 type TextsAndSvg = {
   text: string;
   subText: string;
   svgPath: string;
 };
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmallerThanMd = breakpoints.smaller(BreakpointTypes.MD);
+
+const svgSize = computed<string>(() => (isSmallerThanMd.value ? "50px" : "125px"));
+
 const gameStore = useGameStore();
 const { game } = storeToRefs(gameStore);