From f733ed736ea0d96f968a0d73e1742434e94239a2 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Sat, 3 Jan 2026 21:56:37 +0100
Subject: [PATCH] feat(gallery): improve responsivity

---
 app/assets/app.css              |  4 +++
 app/components/GalleryModal.vue | 61 +++++++++++++++++++++++++--------
 app/pages/gallery.vue           |  1 -
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/app/assets/app.css b/app/assets/app.css
index 561d2a4..c6f55d2 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -35,3 +35,7 @@
 body {
   background: #000000;
 }
+
+@theme {
+  --breakpoint-xs: 30rem;
+}
diff --git a/app/components/GalleryModal.vue b/app/components/GalleryModal.vue
index db1d18f..25bd62e 100644
--- a/app/components/GalleryModal.vue
+++ b/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="max-w-[90vw] h-[80vh] object-contain rounded-sm"
+            class="xs:max-w-[95vw] sm:max-w-[90vw] md:h-[80vh] object-contain rounded-sm"
           />
 
           <!-- metadata -->
-          <div
-            class="px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
+          <p
+            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>{{ item.exif.settings.aperture }}</span>
-            <span>{{ item.exif.settings.shutter }}</span>
-            <span>ISO {{ item.exif.settings.iso }}</span>
-            <span>{{ item.exif.settings.focalLength }}</span>
-          </div>
+            <span class="text-white/50"> | </span>
+            <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-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)"
         />
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 68376e5..f77e84d 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -224,7 +224,6 @@ onMounted(() => {
           :src="image.url"
           :width="600"
           :custom="true"
-          :fetchpriority="isModalOpen ? 'low' : 'auto'"
         >
           <img
             v-if="isLoaded"