fix: table cannot scroll horizontally in mobile devices

Author: 0xJacky

app/auto-imports.d.ts

@@ -90,7 +90,6 @@ declare global {
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
-
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -174,4 +173,4 @@ declare module 'vue' {
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
     readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
   }
-}
+}

app/package.json

@@ -25,7 +25,7 @@
     "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "ant-design-vue": "^4.2.5",
+    "ant-design-vue": "^4.2.6",
     "apexcharts": "^3.54.1",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",

app/pnpm-lock.yaml

@@ -472,7 +472,7 @@ const paginationSize = computed(() => {
       :pagination="false"
       :row-key="rowKey"
       :row-selection="rowSelection"
-      :scroll="{ x: scrollX }"
+      :scroll="{ x: scrollX ?? true }"
       :size="size as any"
       :expanded-row-keys="expandKeysList"
       @change="onTableChange"
@@ -483,7 +483,7 @@ const paginationSize = computed(() => {
           <span class="ant-table-drag-icon"><HolderOutlined /></span>
           {{ text }}
         </template>
-        <template v-if="column.dataIndex === 'action'">
+        <div v-if="column.dataIndex === 'action'" class="action">
           <template v-if="!props.disableView && !inTrash">
             <AButton
               type="link"
@@ -559,7 +559,7 @@ const paginationSize = computed(() => {
               </AButton>
             </APopconfirm>
           </template>
-        </template>
+        </div>
       </template>
     </ATable>
     <StdPagination
@@ -611,6 +611,14 @@ const paginationSize = computed(() => {
     display: none;
   }
 }
+
+.action {
+  @media (max-width: 768px) {
+    .ant-divider-vertical {
+      display: none;
+    }
+  }
+}
 </style>
 
 <style lang="less">

app/src/components/StdDesign/StdDataDisplay/StdTable.vue

@@ -18,6 +18,7 @@ const columns: Column[] = [{
     type: input,
   },
   search: true,
+  minWidth: 400,
 }, {
   title: () => $gettext('Category'),
   dataIndex: 'site_category_id',
@@ -34,6 +35,7 @@ const columns: Column[] = [{
   sorter: true,
   pithy: true,
   batch: true,
+  minWidth: 200,
 }, {
   title: () => $gettext('Status'),
   dataIndex: 'enabled',
@@ -60,15 +62,18 @@ const columns: Column[] = [{
   },
   sorter: true,
   pithy: true,
+  minWidth: 100,
 }, {
   title: () => $gettext('Updated at'),
   dataIndex: 'modified_at',
   customRender: datetime,
   sorter: true,
   pithy: true,
+  minWidth: 200,
 }, {
   title: () => $gettext('Action'),
   dataIndex: 'action',
+  minWidth: 300,
 }]
 
 export default columns