fix(ui): custom scrollbars

src/components/Dropdown.vue

@@ -15,8 +15,8 @@
       </div>
     </template>
     <template #content>
-      <div class="bg-white rounded w-full min-w-40">
+      <div class="bg-white rounded w-full min-w-40 overflow-hidden">
-        <div class="p-1 max-h-64 overflow-auto text-sm">
+        <div class="p-1 max-h-64 overflow-auto custom-scroll text-sm">
           <div v-if="isLoading" class="p-2 text-gray-600 italic">
             {{ t`Loading...` }}
           </div>

src/components/Popover.vue

@@ -10,7 +10,7 @@
     <div
       ref="popover"
       :class="popoverClass"
-      class="bg-white rounded border shadow-md popover-container relative z-10"
+      class="bg-white rounded border shadow-lg popover-container relative z-10"
       v-show="isOpen"
     >
       <slot name="content" :togglePopover="togglePopover"></slot>
@@ -79,6 +79,7 @@ export default {
       if (!this.popper) {
         this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
           placement: this.placement,
+          modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
         });
       } else {
         this.popper.update();

src/components/Report/ListReport.vue

@@ -21,6 +21,7 @@
             flex-shrink-0
             overflow-x-auto
             whitespace-nowrap
+            no-scrollbar
           "
         >
           {{ col.label }}
@@ -58,6 +59,7 @@
                 flex-shrink-0
                 overflow-x-auto
                 whitespace-nowrap
+                no-scrollbar
               "
             >
               {{ cell.value }}
@@ -73,7 +75,6 @@
 
     <!-- Pagination Footer -->
     <div class="mt-auto flex-shrink-0" v-if="report.usePagination">
-      <hr />
       <Paginator
         :item-count="report?.reportData?.length ?? 0"
         class="px-4"

src/components/Tooltip.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import { createPopper } from '@popperjs/core/lib/popper-lite';
 import flip from '@popperjs/core/lib/modifiers/flip';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
 import offset from '@popperjs/core/lib/modifiers/offset';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { createPopper } from '@popperjs/core/lib/popper-lite';
 
 function generateGetBoundingClientRect(x = 0, y = 0) {
   return () => ({

src/components/TwoColumnForm.vue

@@ -20,7 +20,7 @@
         :key="`${df.fieldname}-inline`"
       >
         <TwoColumnForm
-          class="overflow-auto"
+          class="overflow-auto custom-scroll"
           style="max-height: calc((var(--h-row-mid) + 1px) * 3 - 1px)"
           ref="inlineEditForm"
           :doc="inlineEditDoc"

src/components/WithScroll.vue

@@ -1,12 +1,17 @@
 <template>
-  <div class="scroll-container">
+  <div class="custom-scroll">
     <slot></slot>
   </div>
 </template>
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'WithScroll',
   emits: ['scroll'],
+  data() {
+    return { listener: undefined } as { listener?: () => void };
+  },
   mounted() {
     this.listener = () => {
       let { scrollLeft, scrollTop } = this.$el;
@@ -15,26 +20,12 @@ export default {
     this.$el.addEventListener('scroll', this.listener);
   },
   beforeUnmount() {
-    if (this.listener) {
+    if (!this.listener) {
+      return;
+    }
+
     this.$el.removeEventListener('scroll', this.listener);
     delete this.listener;
-    }
   },
-};
+});
 </script>
-
-<style>
-.scroll-container::-webkit-scrollbar {
-  width: var(--w-scrollbar);
-  height: var(--w-scrollbar);
-}
-.scroll-container::-webkit-scrollbar-thumb {
-  background-color: theme('colors.gray.100');
-}
-.scroll-container::-webkit-scrollbar-thumb:hover {
-  background-color: theme('colors.gray.200');
-}
-.scroll-container::-webkit-scrollbar-track {
-  background-color: white;
-}
-</style>

src/pages/ChartOfAccounts.vue

@@ -3,7 +3,7 @@
     <PageHeader :title="t`Chart of Accounts`" />
 
     <!-- Chart of Accounts -->
-    <div class="flex-1 flex flex-col overflow-y-auto mb-4" v-if="root">
+    <div class="flex-1 flex flex-col overflow-y-auto mb-4 custom-scroll" v-if="root">
       <!-- Chart of Accounts Indented List -->
       <template v-for="account in allAccounts" :key="account.name">
         <!-- Account List Item -->
@@ -135,11 +135,11 @@
   </div>
 </template>
 <script>
-import { fyo } from 'src/initFyo';
 import { t } from 'fyo';
 import { isCredit } from 'models/helpers';
 import { ModelNameEnum } from 'models/types';
 import PageHeader from 'src/components/PageHeader';
+import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
 import { docsPath, openQuickEdit } from 'src/utils/ui';
 import { nextTick } from 'vue';

src/pages/GetStarted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader :title="t`Set Up Your Workspace`" />
-    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+    <div class="flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
       <div
         class="p-4 border-b"
         v-for="section in sections"

src/pages/ListView/List.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="text-base flex flex-col overflow-y-hidden">
     <!-- Title Row -->
-    <div class="flex items-center">
+    <div
+      class="flex items-center"
+      :style="{
+        paddingRight: dataSlice.length > 13 ? 'var(--w-scrollbar)' : '',
+      }"
+    >
       <p class="w-8 text-right mr-4 text-gray-700">#</p>
       <Row
         class="flex-1 text-gray-700 border-none h-row-mid"
@@ -31,8 +36,12 @@
     <hr />
 
     <!-- Data Rows -->
-    <div class="overflow-y-auto" v-if="dataSlice.length !== 0">
+    <div class="overflow-y-auto custom-scroll" v-if="dataSlice.length !== 0">
-      <div v-for="(doc, i) in dataSlice" :key="doc.name">
+      <div
+        v-for="(doc, i) in dataSlice"
+        :key="doc.name"
+        style="min-width: calc(var(--w-desk) - var(--w-scrollbar))"
+      >
         <!-- Row Content -->
         <div class="flex hover:bg-gray-50 items-center">
           <p class="w-8 text-right mr-4 text-gray-900">

src/styles/index.css

@@ -63,7 +63,7 @@ input[type='number']::-webkit-inner-spin-button {
   --w-desk: calc(100vw - var(--w-sidebar));
   --w-desk-fixed: calc(var(--w-app) - var(--w-sidebar));
   --w-quick-edit: 22rem;
-  --w-scrollbar: 0.5rem;
+  --w-scrollbar: 0.6rem;
 
   /* Row Heights */
   --h-row-smallest: 2rem;
@@ -123,3 +123,24 @@ input[type='number']::-webkit-inner-spin-button {
   vertical-align: -3px;
   @apply text-red-500;
 }
+
+.custom-scroll::-webkit-scrollbar {
+  width: var(--w-scrollbar);
+  height: var(--w-scrollbar);
+}
+
+.custom-scroll::-webkit-scrollbar-track:vertical {
+  border-left: solid 1px theme('colors.gray.200');
+}
+
+.custom-scroll::-webkit-scrollbar-track:horizontal {
+  border-top: solid 1px theme('colors.gray.200');
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background: theme('colors.gray.200');
+}
+
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+  background: theme('colors.gray.400');
+}