From 3f6a58c0ed7253758081a5d4f3c2933439d55d8c Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 14 Oct 2025 23:52:18 +0200
Subject: [PATCH] MangaCardList grid gapping withtag show loading under
 navigation

---
 website/app/components/MangaCardList.vue |  4 ++--
 website/app/pages/manga/tag/[tag].vue    | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/website/app/components/MangaCardList.vue b/website/app/components/MangaCardList.vue
index 58f2735..d0f594b 100644
--- a/website/app/components/MangaCardList.vue
+++ b/website/app/components/MangaCardList.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="flex flex-row flex-wrap gap-2 justify-evenly">
+    <div class="grid grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))] gap-4">
         <MangaCard
             v-for="(m, i) in manga"
             :key="m.key"
             :manga="m"
             :expanded="i === expanded"
-            class="cursor-pointer"
+            class="cursor-pointer basis-(--mangacover-width)"
             @click="$emit('click', m)" />
     </div>
 </template>
diff --git a/website/app/pages/manga/tag/[tag].vue b/website/app/pages/manga/tag/[tag].vue
index 8cdcd86..ecf3d7d 100644
--- a/website/app/pages/manga/tag/[tag].vue
+++ b/website/app/pages/manga/tag/[tag].vue
@@ -1,20 +1,20 @@
 <template>
-    <LoadingPage :loading="status === 'pending'">
-        <TrangaPage>
-            <template #title>
-                <h1 class="text-2xl">
-                    Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
-                </h1>
-            </template>
+    <TrangaPage>
+        <template #title>
+            <h1 class="text-2xl">
+                Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
+            </h1>
+        </template>
+        <LoadingPage :loading="status === 'pending'">
             <MangaCardList :manga="manga" />
-        </TrangaPage>
-    </LoadingPage>
+        </LoadingPage>
+    </TrangaPage>
 </template>
 
 <script setup lang="ts">
 const route = useRoute();
 const tag = route.params.tag as string;
-const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag } });
+const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag }, lazy: true });
 
 useHead({ title: 'Tranga' });
 </script>