TanStack / TanStack/tanstack.com

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

Ouverte
#948 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
1.1k
Forks
401
Merge moyen
18 h 14 min
PR mergées (30 j)
56

Description

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 ...

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Ouvrez la page de docs reproduite à l’URL fournie et examinez le contrôle de développement/réduction de la barre de titre situé à côté de « Copy page. ». Vérifiez que le bouton bascule peut changer d’état à plusieurs reprises, que l’icône reflète chaque état et qu’une préférence développée n’affiche pas brièvement la mise en page contrainte après actualisation. Aucun fichier source ni chemin de test n’est indiqué dans l’issue.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
typescript
Domaine
documentation, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.