Merge pull request #4376 from drgnchan/hotfix/find-n6-table-scroll

fix(frontend): preserve horizontal table scrolling on tablets

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;

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
+    )
+  })
+})