From 527d4b0bfbe5f888f481f80cda14c1d5e54f2ef5 Mon Sep 17 00:00:00 2001
From: TDLaouer <tdlaouer@protonmail.com>
Date: Mon, 14 Jul 2025 14:23:56 +0200
Subject: [PATCH] fix css

---
 components/CardView.vue | 84 +++++++++++++++++++++--------------------
 pages/game.vue          |  4 +-
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/components/CardView.vue b/components/CardView.vue
index 1629d8b..073e3ba 100644
--- a/components/CardView.vue
+++ b/components/CardView.vue
@@ -1,46 +1,50 @@
 <template>
-  <motion.img
-    v-if="currentCard"
-    :src="currentCard?.image"
-    draggable="false"
-    class="h-[60cqh] max-h-[800px] w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
-    :style="{
-      gridRow: 1,
-      gridColumn: 1,
-      transition: '0.125s transform',
-      x,
-      opacity,
-      rotate,
-      boxShadow:
-        '0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
-    }"
-    :alt="currentCard?.name"
-    drag="x"
-    :drag-constraints="{ left: 0, right: 0 }"
-    :on-drag-end="handleDragEnd"
-  />
-  <h1 class="h-2 text-5xl">{{ currentCard?.name }}</h1>
+  <div class="flex min-h-screen flex-col items-center justify-center">
+    <div class="grid place-items-center">
+      <motion.img
+        v-if="currentCard"
+        :src="currentCard?.image"
+        draggable="false"
+        class="h-auto max-h-screen w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
+        :style="{
+          gridRow: 1,
+          gridColumn: 1,
+          transition: '0.125s transform',
+          x,
+          opacity,
+          rotate,
+          boxShadow:
+            '0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
+        }"
+        :alt="currentCard?.name"
+        drag="x"
+        :drag-constraints="{ left: 0, right: 0 }"
+        :on-drag-end="handleDragEnd"
+      />
+    </div>
+    <h1 class="my-5 text-5xl">{{ currentCard?.name }}</h1>
 
-  <div v-if="currentCard" class="flex justify-between">
-    <!-- Pass Button -->
-    <button
-      class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
-      aria-label="Pass"
-      type="button"
-      @click="swipeLeft"
-    >
-      <span class="text-base font-semibold">Pass</span>
-    </button>
+    <div v-if="currentCard" class="my-5 flex justify-between">
+      <!-- Pass Button -->
+      <button
+        class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
+        aria-label="Pass"
+        type="button"
+        @click="swipeLeft"
+      >
+        <span class="text-base font-semibold">Pass</span>
+      </button>
 
-    <!-- Smash Button -->
-    <button
-      class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none"
-      aria-label="Smash"
-      type="button"
-      @click="swipeRight"
-    >
-      <span class="text-base font-semibold">Smash</span>
-    </button>
+      <!-- Smash Button -->
+      <button
+        class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none"
+        aria-label="Smash"
+        type="button"
+        @click="swipeRight"
+      >
+        <span class="text-base font-semibold">Smash</span>
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/pages/game.vue b/pages/game.vue
index 8f11ff1..7a755cd 100644
--- a/pages/game.vue
+++ b/pages/game.vue
@@ -1,8 +1,6 @@
 <template>
   <div v-if="loading">Loading...</div>
-  <div v-else class="grid min-h-screen place-items-center">
-    <CardView :cards="cardStore.cards" @empty-list="showResults" />
-  </div>
+  <CardView v-else :cards="cardStore.cards" @empty-list="showResults" />
 </template>
 
 <script setup lang="ts">