fix: wrong scrolling behavior in dialog (#313)

components/modal/ModalContainer.vue

@@ -15,10 +15,15 @@ import {
   <ModalDialog v-model="isPreviewHelpOpen">
     <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
-  <ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
-    <PublishWidget :draft-key="dialogDraftKey" expanded />
+  <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
+    <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 />
   </ModalDialog>
-  <ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none>
+  <ModalDialog
+    v-model="isMediaPreviewOpen"
+    pointer-events-none
+    w-full max-w-full h-full max-h-full
+    bg-transparent border-0 shadow-none
+  >
     <ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
   </ModalDialog>
   <ModalDialog v-model="isEditHistoryDialogOpen">

components/modal/ModalDialog.vue

@@ -32,9 +32,6 @@ export interface Props {
    * @default false
    */
   keepAlive?: boolean
-
-  /** customizable class for the div outside of slot */
-  customClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -55,14 +52,12 @@ const deactivated = useDeactivated()
 const route = useRoute()
 
 /** scrollable HTML element */
-const elDialogScroll = ref<HTMLDivElement>()
 const elDialogMain = ref<HTMLDivElement>()
 const elDialogRoot = ref<HTMLDivElement>()
 
 defineExpose({
   elDialogRoot,
   elDialogMain,
-  elDialogScroll,
 })
 
 /** close the dialog */
@@ -146,25 +141,14 @@ export default {
         <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
         <!-- Dialog container -->
         <div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex>
-          <div class="flex-1 flex items-center justify-center p-4">
+          <div flex-1 flex items-center justify-center p-4>
             <!-- We use `class` here to make v-bind being able to be override them -->
             <div
               ref="elDialogMain"
-              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full flex flex-col"
+              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
               v-bind="bindTypeToAny($attrs)"
             >
-              <!-- header -->
-              <slot name="header" />
-              <!-- main -->
-              <div
-                ref="elDialogScroll"
-                class="overflow-y-auto touch-pan-y touch-pan-x overscroll-none flex-1"
-                :class="customClass"
-              >
-                <slot />
-              </div>
-              <!-- footer -->
-              <slot name="footer" />
+              <slot />
             </div>
           </div>
         </div>

components/modal/ModalMediaPreview.vue

@@ -30,16 +30,32 @@ function onClick(e: MouseEvent) {
 
 <template>
   <div relative h-full w-full flex select-none pointer-events-none>
-    <div absolute top-0 left-0 right-0 text-center>
+    <div absolute top-0 left-0 right-0 text-white text-center>
       {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
     </div>
-    <button v-if="hasNext" btn-action-icon absolute pointer-events-auto top="1/2" right-1 title="Next" @click="next">
-      <div i-ri:arrow-right-s-line />
+    <button
+      v-if="hasNext"
+      pointer-events-auto
+      btn-action-icon bg="black/20" aria-label="Close"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
+      absolute top="1/2" right-1
+      :title="$t('action.next')"
+      @click="next"
+    >
+      <div i-ri:arrow-right-s-line text-white />
     </button>
-    <button v-if="hasPrev" btn-action-icon absolute pointer-events-auto top="1/2" left-1 title="Next" @click="prev">
-      <div i-ri:arrow-left-s-line />
+    <button
+      v-if="hasPrev"
+      pointer-events-auto
+      btn-action-icon bg="black/20" aria-label="Close"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
+      absolute top="1/2" left-1
+      :title="$t('action.prev')"
+      @click="prev"
+    >
+      <div i-ri:arrow-left-s-line text-white />
     </button>
-    <img :src="current.url || current.previewUrl" :alt="current.description || ''" w="max-[95%]" h="max-[95%]" ma>
+    <img :src="current.url || current.previewUrl" :alt="current.description || ''" max-h="95%" max-w="95%" ma>
 
     <button
       btn-action-icon bg="black/20" aria-label="Close"