fix: scroll

index.html

@@ -5,7 +5,7 @@
     <title>zashboard</title>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0,viewport-fit=cover"
+      content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
     />
     <meta
       name="description"

package.json

@@ -21,13 +21,15 @@
     "@tanstack/vue-table": "^8.20.5",
     "@tanstack/vue-virtual": "^3.11.2",
     "@types/echarts": "^4.9.22",
+    "@types/hammerjs": "^2.0.46",
     "@types/reconnectingwebsocket": "^1.0.10",
     "@vueuse/core": "^12.2.0",
     "axios": "^1.7.9",
     "countup.js": "^2.8.0",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
     "echarts": "^5.6.0",
+    "hammerjs": "^2.0.8",
     "lodash": "^4.17.21",
     "misans": "^4.0.0",
     "prettier-plugin-organize-imports": "^4.1.0",

src/components/connections/ConnectionTable.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     ref="parentRef"
-    class="h-full overflow-y-auto bg-clip-content p-2"
+    class="h-full bg-clip-content p-2"
     @touchstart.stop
     @touchmove.stop
     @touchend.stop
   >
     <div :style="{ height: `${totalSize}px` }">
       <table :class="`table table-zebra ${sizeOfTable} rounded-none shadow-md`">
-        <thead class="sticky -top-2 z-10 bg-base-100">
+        <thead class="sticky -top-1 z-10 bg-base-100">
           <tr
             v-for="headerGroup in tanstackTable.getHeaderGroups()"
             :key="headerGroup.id"

src/components/proxies/ProxyNodeGrid.vue

@@ -2,8 +2,8 @@
   <div
     :class="
       twMerge(
-        'grid grid-cols-2 gap-2 overflow-x-hidden',
-        truncateProxyName && 'max-h-96 overflow-y-auto',
+        'grid grid-cols-2 gap-2 overflow-y-auto overflow-x-hidden',
+        truncateProxyName && 'max-h-96',
         proxyCardSize === PROXY_CARD_SIZE.LARGE
           ? isSidebarCollapsed
             ? hasTwoColumns

src/views/HomePage.vue

@@ -10,7 +10,6 @@
 
     <div
       class="drawer-content fixed bottom-0 flex h-full w-full flex-col overflow-hidden bg-base-200/40 md:relative md:w-auto"
-      ref="contentRef"
     >
       <component
         v-if="ctrlComp && isSidebarCollapsed"
@@ -19,15 +18,20 @@
         :horizontal="true"
       />
       <div class="relative h-0 flex-1">
-        <div class="absolute h-full w-full overflow-y-auto">
+        <div
+          class="absolute flex h-full w-full flex-col overflow-y-auto max-sm:min-h-[calc(100%+1px)]"
+        >
           <RouterView />
           <div
             class="shrink-0 md:hidden"
             :class="isPWA ? 'max-md:h-[5.5rem]' : 'max-md:h-14'"
           />
         </div>
       </div>
-      <div :class="`btm-nav glass z-30 bg-none md:hidden ${isPWA ? 'h-[5.5rem] pb-8' : 'h-14'}`">
+      <div
+        ref="contentRef"
+        :class="`btm-nav glass z-30 bg-none md:hidden ${isPWA ? 'h-[5.5rem] pb-8' : 'h-14'}`"
+      >
         <button
           v-for="r in renderRoutes"
           :key="r"
@@ -92,8 +96,9 @@ import { fetchProxies } from '@/store/proxies'
 import { fetchRules } from '@/store/rules'
 import { isSidebarCollapsed } from '@/store/settings'
 import { activeBackend, activeUuid, backendList } from '@/store/setup'
-import { useDocumentVisibility, useSwipe } from '@vueuse/core'
-import { computed, ref, watch, type Component } from 'vue'
+import { useDocumentVisibility } from '@vueuse/core'
+import Hammer from 'hammerjs'
+import { computed, onMounted, onUnmounted, ref, watch, type Component } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 const modalRef = ref<HTMLDialogElement | null>(null)
@@ -115,7 +120,7 @@ const ctrlComp = computed(() => {
 })
 
 const contentRef = ref()
-const { direction } = useSwipe(contentRef, { threshold: 15 })
+const hammer = ref<HammerManager | null>(null)
 
 const getNextRouteName = () => {
   const routeName = route.name as ROUTE_NAME
@@ -139,14 +144,23 @@ const getPrevRouteName = () => {
   ]
 }
 
-watch(direction, () => {
-  if (direction.value === 'right') {
-    router.push({ name: getPrevRouteName() })
-  } else if (direction.value === 'left') {
-    router.push({ name: getNextRouteName() })
+onMounted(() => {
+  if (contentRef.value) {
+    hammer.value = new Hammer(contentRef.value)
+
+    hammer.value.on('swipeleft', () => {
+      router.push({ name: getNextRouteName() })
+    })
+    hammer.value.on('swiperight', () => {
+      router.push({ name: getPrevRouteName() })
+    })
   }
 })
 
+onUnmounted(() => {
+  hammer.value?.destroy()
+})
+
 const { proxiesTabShow } = useProxies()
 const { checkUIUpdate } = useSettings()
 watch(

src/views/OverviewPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 overflow-y-auto p-2">
+  <div class="flex flex-col gap-2 p-2">
     <ChartsCard />
     <NetworkCard />
     <div class="flex-1"></div>

src/views/ProxiesPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-y-auto p-2">
+  <div class="p-2">
     <template v-if="isLargeScreen && twoColumnProxyGroup && renderGroups.length > 1">
       <div class="grid grid-cols-2 gap-1">
         <div

src/views/RulesPage.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-if="rulesTabShow === RULE_TAB_TYPE.PROVIDER">
-    <div class="flex flex-col gap-1 overflow-y-auto overflow-x-hidden p-2">
+    <div class="flex flex-col gap-1 overflow-x-hidden p-2">
       <RuleProvider
         v-for="(ruleProvider, index) in renderRulesProvider"
         :key="ruleProvider.name"

src/views/SettingsPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 gap-2 overflow-y-auto p-2">
+  <div class="grid grid-cols-1 gap-2 p-2">
     <ZashboardSettings />
 
     <template v-if="!splitOverviewPage">