diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index f65fdede..f8e72c28 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -42,7 +42,6 @@ useEventListener('keydown', (e: KeyboardEvent) => {
     </ModalDialog>
     <ModalDialog
       v-model="isMediaPreviewOpen"
-      pointer-events-none
       w-full max-w-full h-full max-h-full
       bg-transparent border-0 shadow-none
     >
diff --git a/components/modal/ModalMediaPreview.vue b/components/modal/ModalMediaPreview.vue
index 4053ce2f..ec7be2e3 100644
--- a/components/modal/ModalMediaPreview.vue
+++ b/components/modal/ModalMediaPreview.vue
@@ -22,14 +22,14 @@ function prev() {
 
 function onClick(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
+  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO', 'P'].includes(el.tagName?.toUpperCase()))
   if (!el)
     emit('close')
 }
 </script>
 
 <template>
-  <div relative h-full w-full flex select-none pointer-events-none pt-12>
+  <div relative h-full w-full flex pt-12 @click="onClick">
     <button
       v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
       hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1