From bb9c09e0e23467164f79d54ac51aa52ed4a85ccf Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Wed, 17 Sep 2025 14:45:53 +0100
Subject: [PATCH 1/2] feat(ProseImg): improve zoom functionality

---
 src/runtime/components/prose/Img.vue | 16 +++++++++++++---
 src/theme/prose/img.ts               |  3 ++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/prose/Img.vue b/src/runtime/components/prose/Img.vue
index ebc704a844..1eac6694ec 100644
--- a/src/runtime/components/prose/Img.vue
+++ b/src/runtime/components/prose/Img.vue
@@ -39,6 +39,7 @@ const props = withDefaults(defineProps<ProseImgProps>(), {
 const appConfig = useAppConfig() as ProseImg['AppConfig']
 
 const [DefineImageTemplate, ReuseImageTemplate] = createReusableTemplate()
+const [DefineZoomedImageTemplate, ReuseZoomedImageTemplate] = createReusableTemplate()
 
 const open = ref(false)
 
@@ -78,10 +79,19 @@ if (props.zoom) {
       :class="ui.base({ class: [props.ui?.base, props.class] })"
     />
   </DefineImageTemplate>
+  <DefineZoomedImageTemplate>
+    <component
+      :is="ImageComponent"
+      :src="refinedSrc"
+      :alt="alt"
+      v-bind="$attrs"
+      :class="ui.zoomedImage({ class: [props.ui?.zoomedImage] })"
+    />
+  </DefineZoomedImageTemplate>
 
   <DialogRoot v-if="zoom" v-slot="{ close }" v-model:open="open" :modal="false">
     <DialogTrigger as-child>
-      <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.2, duration: 0.4 }">
+      <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
         <ReuseImageTemplate />
       </Motion>
     </DialogTrigger>
@@ -91,8 +101,8 @@ if (props.zoom) {
         <Motion v-if="open" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :class="ui.overlay({ class: [props.ui?.overlay] })" />
 
         <div v-if="open" :class="ui.content({ class: [props.ui?.content] })" @click="close">
-          <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.2, duration: 0.4 }">
-            <ReuseImageTemplate />
+          <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
+            <ReuseZoomedImageTemplate />
           </Motion>
         </div>
       </AnimatePresence>
diff --git a/src/theme/prose/img.ts b/src/theme/prose/img.ts
index 812c92cfae..fad4e6ddc4 100644
--- a/src/theme/prose/img.ts
+++ b/src/theme/prose/img.ts
@@ -2,7 +2,8 @@ export default {
   slots: {
     base: 'rounded-md',
     overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
-    content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
+    content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none',
+    zoomedImage: 'w-auto sm:h-full max-w-[90vw] max-h-[90vh] rounded-md'
   },
   variants: {
     zoom: {

From e7e5670c5f6afb0c50edad1d3004953518a604b6 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 23 Sep 2025 14:57:13 +0100
Subject: [PATCH 2/2] up

---
 src/theme/prose/img.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/prose/img.ts b/src/theme/prose/img.ts
index acebe00c59..4906053a4a 100644
--- a/src/theme/prose/img.ts
+++ b/src/theme/prose/img.ts
@@ -3,7 +3,7 @@ export default {
     base: 'rounded-md w-full',
     overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
     content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none',
-    zoomedImage: 'w-auto sm:h-full max-w-[90vw] max-h-[90vh] rounded-md'
+    zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
   },
   variants: {
     zoom: {