fix: wrong scrolling behavior in dialog (#313)

components/help/HelpPreview.vue

@@ -39,7 +39,7 @@ const teams: Team[] = [
 </script>
 
 <template>
-  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative max-h-screen>
+  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
     <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
       <div i-ri:close-fill />
     </button>

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,26 +141,15 @@ 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" />
-            </div>
           </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"

components/publish/PublishWidget.vue

@@ -159,7 +159,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
       <div border="b dashed gray/40" />
     </template>
 
-    <div flex gap-4>
+    <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+    <div flex gap-4 h-0 flex-1>
       <NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
         <AccountAvatar :account="currentUser.account" f-full h-full />
       </NuxtLink>
@@ -179,11 +180,12 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           >
         </div>
 
-        <div relative>
+        <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+        <div relative h-0 flex-1 flex flex-col>
           <EditorContent
             :editor="editor"
             flex
-            :class="shouldExpanded ? 'min-h-120px max-h-720px of-y-auto' : ''"
+            :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
           />
           <div v-if="shouldExpanded" absolute right-0 bottom-0 pointer-events-none text-sm text-secondary-light>
             {{ characterLimit - editor?.storage.characterCount.characters() }}

locales/en-US.json

@@ -30,6 +30,8 @@
     "favourite": "Favourite",
     "favourited": "Favourited",
     "more": "More",
+    "next": "Next",
+    "prev": "Prev",
     "publish": "Publish!",
     "reply": "Reply",
     "save_changes": "Save changes",

locales/zh-CN.json

@@ -30,6 +30,8 @@
     "favourite": "喜欢",
     "favourited": "已喜欢",
     "more": "更多",
+    "next": "下一个",
+    "prev": "上一个",
     "publish": "发布！",
     "reply": "回复",
     "save_changes": "保存更改",