From 858f3e4a78ecc974b3fedd6af27e0afe7d5b69cc Mon Sep 17 00:00:00 2001
From: drgnchan <drgnchan@users.noreply.github.com>
Date: Wed, 15 Jul 2026 21:57:08 +0800
Subject: [PATCH] fix(frontend): preserve horizontal table scrolling on tablets

---
 .../src/components/layout/TablePageLayout.vue |  4 ---
 .../layout/__tests__/TablePageLayout.spec.ts  | 26 +++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/layout/__tests__/TablePageLayout.spec.ts

diff --git a/frontend/src/components/layout/TablePageLayout.vue b/frontend/src/components/layout/TablePageLayout.vue
index e4d3d447d..3620697ad 100644
--- a/frontend/src/components/layout/TablePageLayout.vue
+++ b/frontend/src/components/layout/TablePageLayout.vue
@@ -100,10 +100,6 @@ onUnmounted(() => {
   @apply flex-none min-h-fit;
 }
 
-.table-page-layout.mobile-mode .table-scroll-container :deep(.table-wrapper) {
-  @apply overflow-visible;
-}
-
 .table-page-layout.mobile-mode .table-scroll-container :deep(table) {
   @apply flex-none;
   display: table;
diff --git a/frontend/src/components/layout/__tests__/TablePageLayout.spec.ts b/frontend/src/components/layout/__tests__/TablePageLayout.spec.ts
new file mode 100644
index 000000000..3631d0931
--- /dev/null
+++ b/frontend/src/components/layout/__tests__/TablePageLayout.spec.ts
@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { describe, expect, it } from 'vitest'
+
+const componentPath = resolve(dirname(fileURLToPath(import.meta.url)), '../TablePageLayout.vue')
+const componentSource = readFileSync(componentPath, 'utf8')
+
+describe('TablePageLayout responsive table scrolling', () => {
+  it('does not disable the table horizontal scroll container in mobile mode', () => {
+    const tableWrapperBlocks = Array.from(
+      componentSource.matchAll(/([^{}]*:deep\(\.table-wrapper\)[^{}]*)\{([^{}]*)\}/g)
+    )
+
+    expect(tableWrapperBlocks.length).toBeGreaterThan(0)
+
+    const baseBlock = tableWrapperBlocks.find(([selector]) => !selector.includes('.mobile-mode'))
+    const mobileBlocks = tableWrapperBlocks.filter(([selector]) => selector.includes('.mobile-mode'))
+
+    expect(baseBlock?.[2]).toContain('overflow-x-auto')
+    expect(mobileBlocks.every(([, , declarations]) => !declarations.includes('overflow-visible'))).toBe(
+      true
+    )
+  })
+})