fix scroll

src/layouts/components/ResponsiveViewPair.vue

@@ -25,7 +25,7 @@ const isDesktop = useDesktopBreakpoint()
 
 <style scoped>
 .responsive-view-pair {
-  min-height: 100%;
+  min-height: 0;
   height: 100%;
   width: 100%;
   max-width: 100%;
@@ -34,7 +34,7 @@ const isDesktop = useDesktopBreakpoint()
 }
 
 .responsive-view-pair__pane {
-  min-height: 100%;
+  min-height: 0;
   height: 100%;
   width: 100%;
   max-width: 100%;

src/layouts/mobile/mobile-layout.less

@@ -132,11 +132,20 @@
 }
 
 .main-with-bottom-chrome {
-  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+  height: calc(100vh - var(--app-bottom-chrome-height, 108px));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .main-with-bottom-chrome-inner {
-  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
 }
 
 .main-with-bottom-chrome--no-nav,

src/views/base/transactions/DefaultTransactionsPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="absolute inset-0 bg-cover bg-center opacity-60"></div>
+  <div class="relative min-h-0 h-full">
+    <div class="pointer-events-none absolute inset-0 bg-cover bg-center opacity-60" aria-hidden="true"></div>
     <div
       class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
     >
@@ -8,7 +8,7 @@
       <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
     </div>
 
-    <div ref="el" :class="loading ? 'h-screen' : ''" class="px-3 pt-16 pb-10">
+    <div ref="el" class="transactions-page-body px-3 pt-16">
       <list-anim v-if="!loading">
         <Item v-for="item in items" :key="item.id" :item="item" />
         <div :ref="bindMobileObserver" v-show="!loading" class="w-full opacity-0 relative">
@@ -70,10 +70,16 @@ const {
   position: fixed;
   right: 0;
   left: 0;
+  top: 0;
+  z-index: 10;
   @media screen and (min-width: 426px) {
     width: 426px;
     left: auto;
     right: auto;
   }
 }
+
+.transactions-page-body {
+  padding-bottom: calc(var(--app-bottom-chrome-height, 108px) + 1rem);
+}
 </style>

src/views/base/transactions/index.vue

@@ -35,7 +35,7 @@ useTransactionsPageProvider({ boursecu: isBoursecu })
 
 <style scoped>
 .transactions-page-root {
-  min-height: 100%;
+  min-height: 0;
   height: 100%;
 }
 </style>