From 7823c33cfba2cc1031784b0124742e99c8e60502 Mon Sep 17 00:00:00 2001
From: Alexander BC <alexbcberio@gmail.com>
Date: Mon, 31 Mar 2025 22:42:17 +0200
Subject: [PATCH] chore: improve modal view on mobile

---
 src/components/DialogSearchResult.vue | 30 ++++++++++++++-------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/DialogSearchResult.vue b/src/components/DialogSearchResult.vue
index 34b8507..2f9e4f3 100644
--- a/src/components/DialogSearchResult.vue
+++ b/src/components/DialogSearchResult.vue
@@ -5,13 +5,9 @@ import { computed, onMounted, onUnmounted, ref, useTemplateRef } from "vue";
 import MaterialSymbols from "./base/MaterialSymbols.vue";
 import Skeleton from "./base/Skeleton.vue";
 
-const props = defineProps<{
-  searchResult: ArtworksSearchResult | null;
-}>();
+const props = defineProps<{ searchResult: ArtworksSearchResult | null }>();
 
-const emits = defineEmits<{
-  close: [value: void];
-}>();
+const emits = defineEmits<{ close: [value: void] }>();
 
 const dialog = useTemplateRef<HTMLDialogElement>("dialog");
 const imageBlob = ref<string | null>();
@@ -156,25 +152,31 @@ async function downloadArtwork(size: number): Promise<void> {
   <dialog ref="dialog" @close="closeModal">
     <div
       v-if="dialogVisible && searchResult"
-      class="fixed top-0 bottom-0 left-0 right-0 w-full h-full bg-black bg-opacity-75 backdrop-blur-sm"
+      class="fixed top-0 bottom-0 left-0 right-0 w-full h-full overflow-auto bg-black bg-opacity-75 backdrop-blur-sm"
     >
-      <Flex class="h-full">
-        <Flex
-          class="items-center justify-center w-2/3 h-full m-4"
+      <Flex class="flex-col h-full md:flex-row">
+        <div
+          class="items-center justify-center p-4 md:p-0 md:flex md:w-3/5 lg:w-4/6 xl:flex-grow md:h-full"
           @click="closeModal"
         >
           <img
             v-if="imageBlob"
             :src="imageBlob"
             :download="searchResult.title"
-            class="max-w-[42rem] max-h-[42rem]"
+            class="max-w-[90%] max-h-[90%] mx-auto lg:max-w-[42rem] lg:max-h-[42rem]"
             @click.stop="null"
           />
 
-          <Skeleton v-else class="w-[42rem] h-[42rem]" @click.stop="null" />
-        </Flex>
+          <Skeleton
+            v-else
+            class="max-w-[90%] max-h-[90%] mx-auto lg:w-[42rem] lg:h-[42rem]"
+            @click.stop="null"
+          />
+        </div>
 
-        <aside class="w-1/3 h-full text-white border-l border-black bg-primary">
+        <aside
+          class="w-full h-full pb-4 text-white border-l border-black md:w-2/5 lg:w-2/6 xl:w-96 bg-primary md:pb-0"
+        >
           <Flex class="items-center">
             <h1 class="px-4 text-xl">{{ searchResult.title }}</h1>