style: ajusta responsividade geral do projeto

app/pages/(protected)/catalogo/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-10 font-sans text-[#0c0a09] md:px-8 md:py-16">
+  <div
+    class="relative min-h-screen overflow-x-hidden bg-[#f5f5f5] px-3 py-8 font-sans text-[#0c0a09] sm:px-4 md:px-6 md:py-12 xl:px-8 xl:py-16">
     <div
       class="pointer-events-none absolute left-1/2 top-8 h-[460px] w-[min(92vw,820px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(196,184,232,0.6),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(167,229,211,0.56),transparent_34%)] blur-2xl"
       aria-hidden="true"></div>
 
-    <main class="relative mx-auto grid w-full max-w-[1120px] gap-8" aria-labelledby="catalogo-title">
+    <main class="relative mx-auto grid w-full min-w-0 max-w-[1120px] gap-6 md:gap-8" aria-labelledby="catalogo-title">
       <header class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <p
@@ -12,7 +13,7 @@
             Catálogo
           </p>
           <h1 id="catalogo-title"
-            class="my-5 max-w-[720px] font-serif text-[40px] font-light leading-[1.08] tracking-[-0.96px] text-[#0c0a09] md:text-[48px]">
+            class="my-5 max-w-[720px] break-words font-serif text-[34px] font-light leading-[1.08] tracking-[-0.96px] text-[#0c0a09] sm:text-[40px] md:text-[48px]">
             Catálogo de jogos
           </h1>
           <p class="m-0 max-w-[560px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e]">
@@ -20,9 +21,9 @@
           </p>
         </div>
 
-        <div class="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center">
+        <div class="flex min-w-0 shrink-0 flex-col gap-3 sm:flex-row sm:items-center">
           <NuxtLink to="/catalogo/criar"
-            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09]">
+            class="inline-flex min-h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 py-2 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09]">
             <Icon name="mdi:plus" class="text-base" />
             Novo jogo
           </NuxtLink>
@@ -30,16 +31,17 @@
       </header>
 
       <section
-        class="grid gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:p-8"
+        class="grid min-w-0 gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-4 shadow-[0_4px_16px_rgba(0,0,0,0.04)] sm:p-5 md:p-6 xl:p-8"
         aria-label="Lista do catálogo de jogos">
-        <div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-end">
+        <div class="grid min-w-0 gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] xl:items-end">
           <AppSelect id="genre-filter" v-model="selectedGenre" label="Gênero" :options="genreOptions"
             :disabled="isLoading" />
           <AppSelect id="platform-filter" v-model="selectedPlatform" label="Plataforma" :options="platformOptions"
             :disabled="isLoading" />
         </div>
 
-        <div v-if="isLoading" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="status" aria-live="polite">
+        <div v-if="isLoading" class="grid min-w-0 gap-4 md:grid-cols-2 2xl:grid-cols-3" role="status"
+          aria-live="polite">
           <div v-for="item in 6" :key="item" class="h-56 animate-pulse rounded-xl bg-[#f0efed]"></div>
         </div>
 
@@ -57,9 +59,9 @@
           </p>
         </div>
 
-        <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div v-else class="grid min-w-0 gap-4 md:grid-cols-2 2xl:grid-cols-3">
           <article v-for="game in filteredGames" :key="game.id"
-            class="flex flex-col overflow-hidden rounded-xl border border-[#e7e5e4] bg-white transition hover:shadow-[0_4px_16px_rgba(0,0,0,0.08)]">
+            class="flex min-w-0 flex-col overflow-hidden rounded-xl border border-[#e7e5e4] bg-white transition hover:shadow-[0_4px_16px_rgba(0,0,0,0.08)]">
             <div class="relative h-36 bg-[#f0efed]">
               <img v-if="game.images?.thumbnail" :src="game.images.thumbnail" :alt="game.title"
                 class="h-full w-full object-cover" />
@@ -71,10 +73,10 @@
                 " @click="toggleFavorite(game)"
                 class="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/80 shadow backdrop-blur-sm transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-50">
                 <Icon :name="togglingId === game.title
-                  ? 'mdi:loading'
-                  : favoriteIds.has(game.title)
-                    ? 'mdi:heart'
-                    : 'mdi:heart-outline'
+                    ? 'mdi:loading'
+                    : favoriteIds.has(game.title)
+                      ? 'mdi:heart'
+                      : 'mdi:heart-outline'
                   " :class="[
                     'text-base',
                     togglingId === game.title
@@ -88,7 +90,7 @@
 
             <div class="flex flex-1 flex-col gap-3 p-4">
               <div class="grid gap-1">
-                <h3 class="text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
+                <h3 class="min-w-0 break-words text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
                   {{ game.title }}
                 </h3>
                 <p class="text-xs leading-[1.4] tracking-[0.16px] text-[#777169]">
@@ -107,8 +109,9 @@
                 {{ game.description }}
               </p>
 
-              <div class="flex items-center justify-between gap-2 border-t border-[#f0efed] pt-3">
-                <div v-if="confirmingDeleteId === game.id" class="flex gap-2">
+              <div
+                class="flex min-w-0 flex-col gap-2 border-t border-[#f0efed] pt-3 sm:flex-row sm:items-center sm:justify-between">
+                <div v-if="confirmingDeleteId === game.id" class="flex flex-wrap gap-2">
                   <button type="button" :disabled="deletingId === game.id" @click="confirmDelete(game)"
                     class="inline-flex h-7 items-center justify-center gap-1 rounded-full bg-red-50 px-3 text-[12px] font-medium text-red-600 transition hover:bg-red-100 disabled:opacity-50">
                     <Icon :name="deletingId === game.id ? 'mdi:loading' : 'mdi:check'" class="text-xs"
@@ -127,7 +130,7 @@
                 </button>
 
                 <NuxtLink :to="`/catalogo/${game.id}`"
-                  class="inline-flex h-7 items-center justify-center gap-1 rounded-full border border-[#e7e5e4] px-3 text-[12px] font-medium text-[#0c0a09] transition hover:border-[#0c0a09]">
+                  class="inline-flex min-h-7 items-center justify-center gap-1 rounded-full border border-[#e7e5e4] px-3 py-1 text-center text-[12px] font-medium text-[#0c0a09] transition hover:border-[#0c0a09]">
                   Ver detalhes
                   <Icon name="mdi:arrow-right" class="text-xs" />
                 </NuxtLink>