[Bug] Tabbit 侧边栏重新展开后页面未自适应并被遮挡

[Kinda2419]

问题描述

在 Tabbit 浏览器中使用 Claude Code Hub 时，如果先收起 Tabbit 的侧边栏/标签栏，再将其重新展开，CCH 页面不会根据新的可视区域宽度重新自适应。页面仍保持侧栏收起时的布局，导致左侧内容被 Tabbit 的侧边栏/标签栏覆盖。

复现步骤

1. 在 Windows 的 Tabbit 浏览器中打开 CCH，例如进入 /zh-CN/dashboard/logs（使用记录）页面。
2. 收起 Tabbit 的侧边栏/标签栏，观察 CCH 页面扩展到新增的可视区域。
3. 再次展开 Tabbit 的侧边栏/标签栏。
4. 观察 CCH 页面左侧布局。

实际结果

CCH 页面没有跟随浏览器可视区域的变化重新计算宽度或位置，页面左侧的一部分被已展开的 Tabbit 侧边栏/标签栏挡住。

预期结果

Tabbit 侧边栏/标签栏重新展开后，CCH 页面应立即根据当前可视区域重新布局，所有导航和内容均保持可见，不应被浏览器 UI 覆盖。

环境

• 操作系统：Windows
• 浏览器：Tabbit（具体版本待补充）
• CCH 页面：/zh-CN/dashboard/logs
• CCH 版本：待补充

补充说明

• 问题由“收起后再展开 Tabbit 侧边栏/标签栏”触发。
• 现有截图中可以看到页面左侧内容落在浏览器侧栏下方，形成明显遮挡。
• 原始截图包含部署地址、书签、会话及供应商等私有信息，因此未直接公开上传；如维护者需要，可补充脱敏截图或录屏。

[github-actions]

Thank you for reporting this issue with detailed reproduction steps.

Analysis

After investigating the dashboard layout code, this appears to be a browser-specific behavior in Tabbit, rather than a bug in the CCH layout itself. Here is the reasoning:

The CCH dashboard layout uses standard responsive CSS

The dashboard renders through a chain of containers that are all viewport-relative and should reflow automatically when the available width changes:

• src/app/[locale]/dashboard/layout.tsx (line 30): outer container uses min-h-[var(--cch-viewport-height,100vh)] — fluid width, no fixed pixel width.
• src/app/[locale]/dashboard/_components/dashboard-main.tsx (line 30): the <main> element uses mx-auto w-full max-w-7xl px-6 py-8 — w-full (100% of parent) and max-w-7xl cap the width, and both are responsive to viewport changes.
• src/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx (lines 692-693): the table wrapper uses overflow-x-auto with an inner min-w-[900px], so it scrolls horizontally on narrow viewports rather than overflowing.

None of these elements use a fixed pixel width or cache a width value in JavaScript state. Standard CSS layout reflows them whenever the browser's layout engine processes a viewport change.

Width is handled purely by standard responsive utilities

The custom CSS variable --cch-viewport-height (src/app/globals.css, lines 48-55 and 89-99) only addresses height (vh/dvh, the latter for mobile address-bar dynamics). There is no equivalent custom width variable — width relies entirely on Tailwind's w-full, max-w-*, and flexbox, which are handled natively by the browser's layout engine.

The virtualized table already tracks container size

The logs table virtualization (src/hooks/use-virtualized-infinite-list.ts -> src/hooks/use-virtualizer.ts) uses @tanstack/virtual-core's observeElementRect, which is backed by a ResizeObserver. If the scroll container's dimensions change, the virtualizer re-measures automatically. So the table itself should not be the blocker.

Why this points to Tabbit

The key symptom is asymmetric behavior: the page reflows correctly when the sidebar is collapsed (viewport widens), but fails to reflow when the sidebar is re-expanded (viewport narrows). In a standards-compliant browser, both directions trigger the same layout recalculation automatically — no JavaScript resize event is needed for basic CSS reflow. The fact that only one direction works, and that content ends up visually covered by the re-expanded sidebar, indicates that Tabbit is not propagating the viewport-width reduction to the page's layout engine when the sidebar re-expands. This is a browser rendering/resize-notification issue that CCH's CSS and JavaScript cannot directly control.

To help diagnose

Please provide the following to confirm the root cause:

• The exact Tabbit browser version (mentioned as pending in your report).
• Whether the issue also occurs on other CCH pages (e.g. /dashboard, /dashboard/leaderboard), or only on the logs page.
• Whether the issue reproduces in a mainstream Chromium-based browser (Chrome, Edge) — this would confirm whether it is Tabbit-specific.

Potential workarounds

• Resize the browser window slightly after re-expanding the Tabbit sidebar. Any window resize forces the layout engine to recalculate, which should make the page reflow to the correct width.
• Toggle the Tabbit sidebar off and on again — in some browsers a second toggle cycle causes the missed recalculation to fire.
• If the issue is persistent and disruptive, using a standard Chromium or Firefox browser would avoid it entirely, since their viewport-change handling is well-established.

---

Automated response from Claude AI