From 4c73149af830942039d2706744ff11ad6519d329 Mon Sep 17 00:00:00 2001
From: Astrenix <121576066+Astrenix@users.noreply.github.com>
Date: Sun, 19 Jul 2026 02:18:41 +0800
Subject: [PATCH] fix(frontend): restore scrolling on the available channels
 page

The available channels table rendered inside its own
"card overflow-hidden" wrapper instead of the ".table-wrapper" element
that TablePageLayout's scroll chain expects. The outer
.table-scroll-container is overflow-hidden, so when the channel list
grew taller than the viewport the content was simply clipped with no
scrollbar. The extra card wrapper also drew a double border inside the
layout's own card chrome.

Mount the table on .table-wrapper like every other table page so it
receives overflow-y-auto from the layout, and add a source-convention
regression test in the style of TablePageLayout.spec.ts.

Fixes #4555

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../channels/AvailableChannelsTable.vue       |  4 +++-
 .../__tests__/AvailableChannelsTable.spec.ts  | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/channels/__tests__/AvailableChannelsTable.spec.ts

diff --git a/frontend/src/components/channels/AvailableChannelsTable.vue b/frontend/src/components/channels/AvailableChannelsTable.vue
index 0e8cea139b..2de45c6a50 100644
--- a/frontend/src/components/channels/AvailableChannelsTable.vue
+++ b/frontend/src/components/channels/AvailableChannelsTable.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="card overflow-hidden">
+  <!-- .table-wrapper 是 TablePageLayout 滚动链的挂载点：外层 .table-scroll-container
+       负责卡片外观并 overflow-hidden，本层接收 overflow-y-auto 才能在内容超高时滚动。 -->
+  <div class="table-wrapper">
     <table class="w-full table-fixed border-collapse text-sm">
       <thead>
         <tr class="border-b border-gray-100 bg-gray-50/50 text-xs font-medium uppercase tracking-wide text-gray-500 dark:border-dark-700 dark:bg-dark-800/50 dark:text-gray-400">
diff --git a/frontend/src/components/channels/__tests__/AvailableChannelsTable.spec.ts b/frontend/src/components/channels/__tests__/AvailableChannelsTable.spec.ts
new file mode 100644
index 0000000000..ecadecf568
--- /dev/null
+++ b/frontend/src/components/channels/__tests__/AvailableChannelsTable.spec.ts
@@ -0,0 +1,20 @@
+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)), '../AvailableChannelsTable.vue')
+const componentSource = readFileSync(componentPath, 'utf8')
+
+describe('AvailableChannelsTable scroll integration', () => {
+  // #4555：根元素必须是 TablePageLayout 滚动链约定的 .table-wrapper，
+  // 否则内容超出视口高度时被外层 overflow-hidden 裁剪且没有滚动条。
+  it('mounts the table on the .table-wrapper scroll hook', () => {
+    expect(componentSource).toMatch(/<div class="table-wrapper">\s*<table/)
+  })
+
+  it('does not clip content with its own overflow-hidden card wrapper', () => {
+    expect(componentSource).not.toMatch(/<div class="card overflow-hidden">/)
+  })
+})