TanStack / TanStack/tanstack.com

Docs title-bar width toggle: click sticks, icon never updates, and layout flashes on refresh

未关闭
#948 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
TypeScript
星标
1.1k
派生
401
平均合并
18 小时 14 分钟
30 天内合并 PR
56

描述

Bug: docs title-bar width toggle is broken

The expand/collapse button next to "Copy page" on docs pages (visible at ≥1535px viewport) has three issues:

  1. Click works only once, then gets stuck. Starting collapsed, the first click expands the layout. Subsequent clicks do nothing. Same in reverse: starting expanded, the first click collapses but it can't be re-expanded.
  2. Icon never updates. Even when the layout state changes (e.g., on first click), the icon stays as UnfoldHorizontal (arrows pointing outward). It never flips to FoldHorizontal.
  3. Flash on every refresh. When the preference is set to "expanded", refreshing the page paints the constrained (narrow) layout first, then snaps to expanded after hydration.
Repro
  1. Open any docs page at a viewport ≥1535px (e.g. https://tanstack.com/router/latest/docs/framework/react/overview)
  2. Click the expand/collapse icon on the right of the title bar
  3. Try clicking it again — nothing happens, and the icon hasn't changed
  4. Refresh while in the expanded state — observe the brief narrow → expanded flash
Video

https://github.com/user-attachments/assets/5a9b6ad5-5ca9-48d6-ad61-7b3dfa990096

I have a working branch with this fix locally. Will open a PR shortly ...

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

打开提供的 URL 中复现的 docs 页面,检查“Copy page.”旁边标题栏中的展开/折叠控件。验证该切换控件可以反复改变状态,图标会反映每种状态,并且在刷新后,展开的偏好设置不会短暂显示受限布局。issue 中未指定源文件或测试路径。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
documentation, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。