fix(ModalBody.vue): multiple scrollbars issue

kodadot · Mar 18, 2024 · bee82b9 · bee82b9
1 parent cd930af
commit bee82b9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 52 deletions.
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
@@ -15,10 +15,9 @@
         modal-max-height="100vh"
         :title="title"
         content-class="pt-4 pb-5 px-0"
-        :scrollable="false"
         :loading="!autoTeleportLoaded"
         @close="onClose">
-        <div class="px-6 max-h-[50vh] overflow-y-auto">
+        <div class="px-6">
           <ModalIdentityItem />
 
           <ListingCartSingleItemCart

diff --git a/components/shared/SkeletonLoader.vue b/components/shared/SkeletonLoader.vue
@@ -6,7 +6,6 @@
 
     <NeoSkeleton
       v-else
-      id="skeleton-backdrop"
       class="z-[2]"
       rounded
       border-radius="20px"

diff --git a/components/shared/modals/ModalBody.vue b/components/shared/modals/ModalBody.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="modal-width">
+  <div class="modal-body">
     <header class="px-6 py-4 flex justify-between border-b items-center">
       <NeoSkeleton
         v-if="loading"
@@ -27,23 +27,17 @@
     </header>
 
     <div
-      class="relative"
-      :class="[
-        {
-          'limit-height__scrollabe': scrollable,
-          'limit-height__loading': loading,
-        },
-        contentClass,
-      ]">
-      <div v-if="loading">
-        <SkeletonLoader :title="skeletonTitle" class="modal-skeleton" />
-      </div>
+      class="modal-body-content"
+      :class="{
+        [contentClass]: !loading,
+        'modal-body-content__scrollable': scrollable && !loading,
+        'modal-body-content__loading': loading,
+      }">
+      <SkeletonLoader v-if="loading" :title="skeletonTitle" />
 
       <div
-        ref="slot"
-        class="slot"
         :class="{
-          slot__loading: loading,
+          'opacity-0 z-[1] pointer-events-none': loading,
         }">
         <slot />
       </div>
@@ -62,15 +56,12 @@ const props = withDefaults(
     title: string
     loading?: boolean
     modalWidth?: string
-    modalMaxHeight?: string
     contentClass?: string
     scrollable?: boolean
     customSkeletonTitle?: string
   }>(),
   {
     modalWidth: '25rem',
-    modalMaxWidth: '30rem',
-    modalMaxHeight: '70vh',
     scrollable: true,
     contentClass: 'pt-4 pb-5 px-6',
   },
@@ -120,45 +111,39 @@ watch(
 <style lang="scss">
 @import '@/assets/styles/abstracts/variables';
 
-$x-padding: 2rem;
-$t-padding: 1.5rem;
-$b-padding: 1.25rem;
+$px: 2rem;
+$pt: 1.5rem;
+$pb: 1.25rem;
+$header-height: 68px;
+
+/* NeoModal overflow */
+.o-modal__content:has(.modal-body) {
+  overflow-y: hidden !important;
+}
 
-.modal-width {
+.modal-body {
+  height: 100%;
   width: v-bind(modalWidth);
-  max-width: v-bind(modalMaxHeight);
 
   @include mobile {
     width: unset;
   }
-}
-
-.limit-height {
-  &__scrollabe {
-    max-height: v-bind(modalMaxHeight);
-    overflow-y: auto;
-  }
 
-  &__loading {
-    max-height: v-bind(modalMaxHeight);
-    overflow: hidden;
-  }
-}
+  &-content {
+    height: calc(100% - $header-height);
 
-.modal-skeleton {
-  position: unset !important;
-  #skeleton-backdrop {
-    top: $t-padding;
-    left: $x-padding;
-    width: calc(100% - $x-padding * 2);
-    height: calc(100% - ($t-padding + $b-padding));
-    max-height: v-bind(modalMaxHeight) !important;
-  }
-}
+    &__scrollable {
+      overflow-y: auto;
+    }
 
-.slot {
-  &__loading {
-    @apply opacity-0 z-[1] pointer-events-none;
+    &__loading {
+      overflow-y: unset;
+      position: relative;
+      margin-top: $pt;
+      margin-left: $px;
+      width: calc(100% - $px * 2);
+      height: calc(100% - $header-height - ($pt + $pb));
+    }
   }
 }
 

diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -51,7 +51,7 @@ const props = withDefaults(
     rootClass: '',
     noShadow: false,
     enableMobile: true,
-    maxHeight: '80vh',
+    maxHeight: '90vh',
     mobileBreakpoint: '768px',
     appendToBody: true,
   },