fix: responsive layout – game playable on all screen sizes

i18n.config.ts

@@ -15,8 +15,13 @@ export default defineI18nConfig(() => ({
       Continue: "Continue",
       "Back to menu": "Back to menu",
       "Puzzle Complete!": "Puzzle Complete!",
+<<<<<<< copilot/improve-responsive-ux
+      "Hold Ctrl or Shift and click tiles to select multiple and drag a group":
+        "Hold Ctrl or Shift and click tiles to select multiple and drag a group",
+=======
       Preview: "Preview",
       "Close preview": "Close preview",
+>>>>>>> main
     },
   },
 }));

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'h-lvh overflow-hidden p-4',
+      'min-h-lvh overflow-x-hidden p-4',
       'bg-[length:200%] animate-moving bg-gradient-to-r from-[#FBFBFB] to-[#bfbfbf]',
     ]"
   >

layouts/game.vue

@@ -1,7 +1,7 @@
 <template>
   <div
       :class="[
-      'h-lvh overflow-hidden p-4',
+      'min-h-lvh overflow-x-hidden p-4',
       'bg-[length:200%] animate-moving bg-gradient-to-r from-[#FBFBFB] to-[#bfbfbf]',
     ]"
   >
@@ -10,7 +10,7 @@
         <img src="/assets/logo.svg" />
       </NuxtLink>
     </nav>
-    <div class="flex w-full h-screen overflow-auto">
+    <div class="flex w-full h-full overflow-y-auto overflow-x-hidden">
       <slot />
     </div>
   </div>

modules/game/views/GameView.vue

@@ -2,6 +2,11 @@
 import { LevelsKeys, WIDTH_GAME } from "~/modules/core/constants";
 import type { GameProps, GameData } from "../types";
 
+const { width: windowWidth } = useWindowSize();
+const boardScale = computed(() =>
+  Math.min(1, (windowWidth.value - 32) / WIDTH_GAME)
+);
+
 const props = withDefaults(defineProps<GameProps>(), {
   level: LevelsKeys["9x13"],
 });
@@ -141,7 +146,7 @@ onMounted(() => {
       </div>
     </Transition>
   </Teleport>
-  <div class="items-center flex mx-auto w-[700px] flex-col mt-10">
+  <div class="items-center flex mx-auto w-full flex-col mt-6 px-4">
     <div class="mb-10 h-[66px]">
       <img
         :src="data.imgSrc"
@@ -152,36 +157,52 @@ onMounted(() => {
       />
     </div>
     <div
-      :class="['flex justify-start backdrop-blur-[5%] shadow-[0px_0px_23.9px_8px_#0000001A]']"
+      class="overflow-hidden"
+      :style="{
+        width: `${WIDTH_GAME * boardScale}px`,
+        height: `${(data.heightScreen + 2) * boardScale}px`,
+      }"
     >
       <div
+        :class="['flex justify-start backdrop-blur-[5%] shadow-[0px_0px_23.9px_8px_#0000001A]']"
         :style="{
-          height: `${data.heightScreen + 2}px`,
+          transform: `scale(${boardScale})`,
+          transformOrigin: 'top left',
           width: `${WIDTH_GAME}px`,
         }"
       >
         <div
-          class="flex flex-wrap "
           :style="{
-            minWidth: `${WIDTH_GAME}px`,
+            height: `${data.heightScreen + 2}px`,
+            width: `${WIDTH_GAME}px`,
           }"
         >
-          <Piece
-            v-for="item in data.shuffledPieces"
-            :item="item"
-            :key="item.position"
-            :imgSrc="data.imgSrc"
-            :is-highlight="data.highlight === item.position"
-            :is-selected="data.selectedPositions.includes(item.position)"
-            :selected-positions="data.selectedPositions"
-            @swap="onSwap"
-            @drag-enter="onDragEnter"
-            @select="({ position, multi }) => toggleSelection(position, multi)"
-          />
+          <div
+            class="flex flex-wrap "
+            :style="{
+              minWidth: `${WIDTH_GAME}px`,
+            }"
+          >
+            <Piece
+              v-for="item in data.shuffledPieces"
+              :item="item"
+              :key="item.position"
+              :imgSrc="data.imgSrc"
+              :is-highlight="data.highlight === item.position"
+              :is-selected="data.selectedPositions.includes(item.position)"
+              :selected-positions="data.selectedPositions"
+              @swap="onSwap"
+              @drag-enter="onDragEnter"
+              @select="({ position, multi }) => toggleSelection(position, multi)"
+            />
+          </div>
         </div>
       </div>
     </div>
-    <div class="mt-10 flex justify-between w-full items-center">
+    <div
+      class="mt-6 flex justify-between items-center"
+      :style="{ width: `${WIDTH_GAME * boardScale}px` }"
+    >
       <UiButton type="outline" @click="onReset">{{ $t("RESTART") }}</UiButton>
       <UiButton type="outline" @click="onPause">{{ $t("PAUSE") }}</UiButton>
       <div class="text-[#303030] text-2xl">
@@ -190,8 +211,11 @@ onMounted(() => {
       <div class="text-[#303030] text-2xl">{{ displayTime }}</div>
     </div>
     <!-- Podpowiedź multi-select -->
-    <p class="mt-3 text-xs text-[#aaa] text-center w-full select-none">
-      Przytrzymaj <kbd class="font-sans bg-[#f0f0f0] text-[#555] border border-[#ccc] rounded px-1 py-0.5 text-[10px]">Ctrl</kbd> lub <kbd class="font-sans bg-[#f0f0f0] text-[#555] border border-[#ccc] rounded px-1 py-0.5 text-[10px]">Shift</kbd> i klikaj klocki, aby zaznaczyć kilka i przeciągnąć grupę
+    <p
+      class="mt-3 text-xs text-[#aaa] text-center select-none"
+      :style="{ width: `${WIDTH_GAME * boardScale}px` }"
+    >
+      {{ $t("Hold Ctrl or Shift and click tiles to select multiple and drag a group") }}
     </p>
   </div>
 </template>

modules/game/views/MainView.vue

@@ -46,7 +46,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="justify-center items-center flex mx-auto w-[700px] flex-col">
+  <div class="justify-center items-center flex mx-auto w-full max-w-[700px] flex-col px-4">
     <span class="text-3xl font-semibold text-center text-[#605F5B] mb-5">{{
       $t("A tile-sliding picture game.")
     }}</span>
@@ -61,7 +61,7 @@ onMounted(() => {
       />
       <span
         v-else
-        class="block w-[700px] h-[466px] bg-[length:400%] animate-moving bg-gradient-to-r from-[#777777] to-[#bbbbbb]"
+        class="block w-full h-[466px] bg-[length:400%] animate-moving bg-gradient-to-r from-[#777777] to-[#bbbbbb]"
       ></span>
       <div
         class="w-full absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] flex flex-col items-center justify-center"

modules/ui/components/UiModal.vue

@@ -15,7 +15,7 @@ const onClickOutside = () => {
   <Teleport to="body">
     <div v-if="isOpen" class="fixed top-0 left-0 w-full h-full z-50">
       <div
-        class="w-[1200px] h-[820px] absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] bg-[#DDDDDDEE] rounded-[40px] backdrop-blur-[5%] shadow-[0px_0px_23.9px_8px_#0000001A] p-10"
+        class="w-[min(90vw,1200px)] h-[min(85vh,820px)] absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] bg-[#DDDDDDEE] rounded-[40px] backdrop-blur-[5%] shadow-[0px_0px_23.9px_8px_#0000001A] p-10"
       >
         <div
           class="flex flex-col h-full w-full"

server/api/get-images.ts

@@ -12,7 +12,6 @@ export default defineEventHandler(async (event) => {
     });
   }
 
-  // ...existing code...
   const perPage = Number(per_page);
   if (!per_page || !Number.isInteger(perPage) || perPage < 1 || perPage > 100) {
     throw createError({