From 598d1d09bd03bc0c3a511562439d6a30e330928a Mon Sep 17 00:00:00 2001
From: loicmaes <97891718+loicmaes@users.noreply.github.com>
Date: Sat, 11 Apr 2026 18:40:55 +0200
Subject: [PATCH 1/2] :lipstick: fix layout issue

---
 app/components/project/ProjectShowcaseCard.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/project/ProjectShowcaseCard.vue b/app/components/project/ProjectShowcaseCard.vue
index 184ff20..1f33e34 100644
--- a/app/components/project/ProjectShowcaseCard.vue
+++ b/app/components/project/ProjectShowcaseCard.vue
@@ -7,10 +7,10 @@ const apiUrl = useRuntimeConfig().public.api.url;
 </script>
 
 <template>
-  <UiCard>
-    <div class="px-6">
+  <UiCard class="relative overflow-hidden">
+    <div class="w-full px-6">
       <NuxtImg
-        class="aspect-4/3 @lg:aspect-2/1 rounded-sm"
+        class="w-full aspect-4/3 @lg:aspect-2/1 rounded-sm object-cover"
         :src="`${apiUrl}/projects/${project.id}/banner`"
       />
     </div>
@@ -22,5 +22,10 @@ const apiUrl = useRuntimeConfig().public.api.url;
         {{ project.description }}
       </UiCardDescription>
     </UiCardHeader>
+
+    <NuxtLinkLocale
+      :to="`/projects/${project.id}-${project.slug}`"
+      class="absolute inset-0"
+    />
   </UiCard>
 </template>

From 11c9fa3e0f61917760e0dd6f7c55a705e17e6af4 Mon Sep 17 00:00:00 2001
From: loicmaes <97891718+loicmaes@users.noreply.github.com>
Date: Sat, 11 Apr 2026 18:41:56 +0200
Subject: [PATCH 2/2] :lipstick: fix overflowing project card

---
 app/pages/projects/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/projects/index.vue b/app/pages/projects/index.vue
index 8b51fb9..308b4f5 100644
--- a/app/pages/projects/index.vue
+++ b/app/pages/projects/index.vue
@@ -53,7 +53,7 @@ const { search, clear } = useSearch(
 
         <div
           v-if="!hasFirstLoaded && loading.list"
-          class="grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
+          class="grid grid-cols-1 @md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
         >
           <UiSkeleton
             v-for="i in 4"