fix(ui): remove unsightly scrollbars

src/components/Charts/DonutChart.vue

@@ -77,7 +77,8 @@
           text-xs text-gray-600
           font-semibold
           whitespace-nowrap
-          overflow-x-scroll
+          overflow-x-auto
+          no-scrollbar
         "
       >
         {{

src/components/Controls/Currency.vue

@@ -17,7 +17,7 @@
     />
     <div
       v-show="!showInput"
-      :class="[inputClasses, 'cursor-text whitespace-nowrap overflow-x-scroll']"
+      :class="[inputClasses, 'cursor-text whitespace-nowrap overflow-x-auto']"
       @click="activateInput"
       @focus="activateInput"
       tabindex="0"

src/components/Report/ListReport.vue

@@ -16,7 +16,7 @@
             text-gray-600 text-base
             px-3
             flex-shrink-0
-            overflow-x-scroll
+            overflow-x-auto
             whitespace-nowrap
           "
         >
@@ -50,7 +50,7 @@
                 text-gray-900 text-base
                 px-3
                 flex-shrink-0
-                overflow-x-scroll
+                overflow-x-auto
                 whitespace-nowrap
               "
             >

src/components/SearchBar.vue

@@ -58,7 +58,7 @@
     <hr v-if="suggestions.length" />
 
     <!-- Search List -->
-    <div :style="`max-height: ${49 * 6 - 1}px`" class="overflow-scroll">
+    <div :style="`max-height: ${49 * 6 - 1}px`" class="overflow-auto">
       <div
         v-for="(si, i) in suggestions"
         :key="`${i}-${si.key}`"

src/components/Sidebar.vue

@@ -16,7 +16,7 @@
             text-xl
             font-semibold
             whitespace-nowrap
-            overflow-scroll
+            overflow-auto
             no-scrollbar
             select-none
             w-32

src/pages/Dashboard/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <PageHeader :title="t`Dashboard`" />
 
-    <div class="mx-4 overflow-y-scroll no-scrollbar flex flex-col gap-8">
+    <div class="mx-4 overflow-y-auto no-scrollbar flex flex-col gap-8">
       <Cashflow class="" />
       <hr />
       <UnpaidInvoices />

src/pages/Dashboard/Expenses.vue

@@ -18,7 +18,7 @@
           @mouseleave="active = null"
         >
           <div class="w-3 h-3 rounded-sm flex-shrink-0" :class="d.class" />
-          <p class="ml-2 overflow-x-scroll whitespace-nowrap no-scrollbar w-28">
+          <p class="ml-2 overflow-x-auto whitespace-nowrap no-scrollbar w-28">
             {{ d.account }} 
           </p>
           <p class="whitespace-nowrap flex-shrink-0 ml-auto">

src/pages/DataImport.vue

@@ -127,7 +127,7 @@
       <div v-if="fileName" class="pb-4">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
         <div
-          class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll no-scrollbar"
+          class="gap-2 mt-4 grid grid-flow-col overflow-x-auto no-scrollbar"
         >
           <div
             v-for="(f, k) in importer.assignableLabels"
@@ -165,7 +165,7 @@
           {{ t`Verify Imported Data` }}
         </h2>
 
-        <div class="overflow-scroll mt-4 pb-4">
+        <div class="overflow-auto mt-4 pb-4">
           <!-- Column Name Rows  -->
           <div
             class="grid grid-flow-col pb-4 border-b gap-2 sticky top-0 bg-white"
@@ -280,7 +280,7 @@
         <p class="text-lg text-center">
           {{ t`Successfully created the following ${names.length} entries:` }}
         </p>
-        <div class="max-h-96 overflow-y-scroll">
+        <div class="max-h-96 overflow-y-auto">
           <div
             v-for="(n, i) in names"
             :key="'name-' + i"

src/pages/DatabaseSelector.vue

@@ -65,7 +65,8 @@
       <hr />
 
       <!-- File List -->
-      <div class="overflow-scroll" style="max-height: 340px">
+      <div class="overflow-y-auto" style="max-height: 340px"
+      >
         <div
           class="h-18 px-6 flex gap-4 items-center"
           :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"

src/pages/ListView/List.vue

@@ -11,7 +11,7 @@
         <div
           v-for="(column, i) in columns"
           :key="column.label"
-          class="py-4 overflow-x-scroll whitespace-nowrap"
+          class="py-4 overflow-x-auto no-scrollbar whitespace-nowrap"
           :class="{
             'text-right': isNumeric(column.fieldtype),
             'pr-4': i === columns.length - 1,

src/pages/Settings/Settings.vue

@@ -36,7 +36,7 @@
           <div class="mt-2 text-xs">{{ tab.label }}</div>
         </div>
       </div>
-      <div class="flex-1 overflow-y-scroll">
+      <div class="flex-1 overflow-y-auto">
         <component :is="activeTabComponent" @change="handleChange" />
       </div>
     </div>