feat(gallery): full screen carousel

app/components/GalleryModal.vue

@@ -15,29 +15,17 @@ const currentIndex = ref(props.initialIndex);
   <UModal
     fullscreen
     :dismissible="false"
-    :ui="{ body: 'bg-black', header: 'hidden' }"
+    :ui="{ body: 'bg-black p-0!', header: 'hidden' }"
     @close:prevent="emit('close', currentIndex)"
   >
     <template #body>
-      <div
-        class="relative w-full h-full flex flex-col items-center justify-center"
-      >
-        <UButton
-          icon="i-lucide-x"
-          color="neutral"
-          variant="link"
-          size="xl"
-          class="absolute top-4 right-4 z-10"
-          aria-label="Close modal"
-          @click="emit('close', currentIndex)"
-        />
-
+      <div class="relative flex flex-col items-center justify-center">
         <UCarousel
           v-slot="{ item }"
           :start-index="props.initialIndex"
           :items="images"
           :ui="{
-            item: 'flex-shrink-0 flex flex-col items-center justify-center select-none',
+            item: 'flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
           }"
           arrows
           :prev="{
@@ -53,7 +41,7 @@ const currentIndex = ref(props.initialIndex);
             ui: { leadingIcon: 'size-8' },
           }"
           :duration="15"
-          class="w-full h-full mt-10"
+          class="w-screen h-screen"
           @select="(index) => (currentIndex = index)"
         >
           <img
@@ -63,7 +51,7 @@ const currentIndex = ref(props.initialIndex);
 
           <!-- metadata -->
           <div
-            class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
+            class="px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
           >
             <span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
             <span class="text-white/50">|</span>
@@ -78,9 +66,21 @@ const currentIndex = ref(props.initialIndex);
           </div>
         </UCarousel>
 
-        <div class="text-white/70 text-sm">
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="link"
+          size="xl"
+          class="absolute top-6 right-6"
+          aria-label="Close modal"
+          @click="emit('close', currentIndex)"
+        />
+
+        <p
+          class="text-white/70 text-sm absolute bottom-6 left-1/2 -translate-x-1/2"
+        >
           {{ currentIndex + 1 }} / {{ images.length }}
-        </div>
+        </p>
       </div>
     </template>
   </UModal>