From 9c2249ed0818ad3338283adda3ed3f4aaf299809 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sat, 23 Nov 2024 09:12:57 +1100
Subject: [PATCH] fix(style): game panel now always shows 3 lines exactly

---
 components/GamePanel.vue | 65 +++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 35 deletions(-)

diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index 38f5db21..ed25aedc 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -1,46 +1,41 @@
 <template>
-    <NuxtLink
-        v-if="game"
-        :href="`/store/${game.id}`"
-        class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
-    >
-        <img
-            :src="useObject(game.mCoverId)"
-            class="w-full h-full object-cover"
-        />
-        <div
-            class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"
-        />
-        <div class="absolute bottom-0 left-0 px-2 py-1.5">
-            <h1 class="text-zinc-100 text-sm font-bold font-display">
-                {{ game.mName }}
-            </h1>
-            <p class="text-zinc-400 text-xs">
-                {{
-                    game.mShortDescription.split(" ").slice(0, 10).join(" ")
-                }}...
-            </p>
-        </div>
-    </NuxtLink>
+  <NuxtLink
+    v-if="game"
+    :href="`/store/${game.id}`"
+    class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
+  >
+    <img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
     <div
-        v-else
-        class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center"
-    >
-        <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
-            no game
-        </p>
+      class="absolute inset-0 bg-gradient-to-b from-transparent to-95% to-zinc-800"
+    />
+    <div class="absolute bottom-0 left-0 px-2 py-1.5">
+      <h1 class="text-zinc-100 text-sm font-bold font-display">
+        {{ game.mName }}
+      </h1>
+      <p class="text-zinc-400 text-xs line-clamp-2">
+        {{ game.mShortDescription }}
+      </p>
     </div>
+  </NuxtLink>
+  <div
+    v-else
+    class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center"
+  >
+    <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
+      no game
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-    game?: SerializeObject<{
-        id: string;
-        mCoverId: string;
-        mName: string;
-        mShortDescription: string;
-    }>;
+  game?: SerializeObject<{
+    id: string;
+    mCoverId: string;
+    mName: string;
+    mShortDescription: string;
+  }>;
 }>();
 </script>