fix: table cannot scroll horizontally in mobile devices

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

@@ -45,8 +45,8 @@ importers:
         specifier: ^5.5.0
         version: 5.5.0
       ant-design-vue:
-        specifier: ^4.2.5
+        specifier: ^4.2.6
-        version: 4.2.5(vue@3.5.12(typescript@5.6.3))
+        version: 4.2.6(vue@3.5.12(typescript@5.6.3))
       apexcharts:
         specifier: ^3.54.1
         version: 3.54.1
@@ -1987,8 +1987,8 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  ant-design-vue@4.2.5:
+  ant-design-vue@4.2.6:
-    resolution: {integrity: sha512-dh5CBXSaxJZBFQBd156sOUuZPfxI7pZsNXDYpHNBt/JyKZoYlbetRp/nJmSragS2Oo0mVC23Ote+TQSGc0TX6g==}
+    resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
@@ -6920,7 +6920,7 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  ant-design-vue@4.2.5(vue@3.5.12(typescript@5.6.3)):
+  ant-design-vue@4.2.6(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-vue': 7.0.1(vue@3.5.12(typescript@5.6.3))

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

@@ -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/views/site/site_list/columns.tsx

@@ -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