feat(gallery): improve responsivity

app/assets/app.css

@@ -35,3 +35,7 @@
 body {
   background: #000000;
 }
+
+@theme {
+  --breakpoint-xs: 30rem;
+}

app/components/GalleryModal.vue

@@ -37,11 +37,12 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
     <template #body>
       <div class="relative flex flex-col items-center justify-center">
         <UCarousel
+          ref="carousel"
           v-slot="{ item, index }"
           :start-index="props.initialIndex"
           :items="images"
           :ui="{
-            item: 'flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
+            item: 'relative flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
           }"
           arrows
           :prev="{
@@ -65,25 +66,57 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
             :src="item.url"
             :width="1920"
             :placeholder="getPlaceholder(item)"
-            :fetchpriority="index === currentIndex ? 'high' : 'low'"
+            class="xs:max-w-[95vw] sm:max-w-[90vw] md:h-[80vh] object-contain rounded-sm"
-            class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
           />
 
           <!-- metadata -->
-          <div
+          <p
-            class="px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
+            class="font-[JetBrains_Mono] text-xs lg:text-sm bottom-13 absolute invisible md:visible"
           >
             <span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
-            <span class="text-white/50">|</span>
+            <span class="text-white/50"> | </span>
             <span>{{ item.exif.camera }}</span>
-            <span class="text-white/50">|</span>
+            <span class="text-white/50"> | </span>
             <span>{{ item.exif.lens }}</span>
-            <span class="text-white/50">|</span>
+            <span class="text-white/50"> | </span>
-            <span>{{ item.exif.settings.aperture }}</span>
+            <span
-            <span>{{ item.exif.settings.shutter }}</span>
+              >{{ item.exif.settings.aperture }}
-            <span>ISO {{ item.exif.settings.iso }}</span>
+              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
-            <span>{{ item.exif.settings.focalLength }}</span>
+              {{ item.exif.settings.focalLength }}</span
-          </div>
+            >
+          </p>
+
+          <p
+            class="font-[JetBrains_Mono] text-xs bottom-16 absolute sm:invisible text-center"
+          >
+            <span>- {{ new Date(item.exif.date).toLocaleDateString() }} -</span>
+            <br />
+            <span>{{ item.exif.camera }}</span>
+            <br />
+            <span>{{ item.exif.lens }}</span>
+            <br />
+            <span
+              >{{ item.exif.settings.aperture }}
+              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
+              {{ item.exif.settings.focalLength }}</span
+            >
+          </p>
+
+          <p
+            class="font-[JetBrains_Mono] text-xs bottom-13 absolute invisible sm:visible md:invisible text-center"
+          >
+            <span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
+            <span class="text-white/50"> | </span>
+            <span>{{ item.exif.camera }}</span>
+            <span class="text-white/50"> | </span>
+            <span>{{ item.exif.lens }}</span>
+            <br />
+            <span
+              >{{ item.exif.settings.aperture }}
+              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
+              {{ item.exif.settings.focalLength }}</span
+            >
+          </p>
         </UCarousel>
 
         <UButton
@@ -91,7 +124,7 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
           color="neutral"
           variant="link"
           size="xl"
-          class="absolute top-6 right-6"
+          class="absolute top-2 right-2 lg:top-4 lg:right-4 xl:top-6 xl:rizght-6"
           aria-label="Close modal"
           @click="emit('close', currentIndex)"
         />

app/pages/gallery.vue

@@ -224,7 +224,6 @@ onMounted(() => {
           :src="image.url"
           :width="600"
           :custom="true"
-          :fetchpriority="isModalOpen ? 'low' : 'auto'"
         >
           <img
             v-if="isLoaded"