Skip to content

fix(frontend): AppShell 内の画面遷移・ステップ切替でスクロール位置を先頭へリセット (#549) - #592

Open
YosukeMiyata wants to merge 4 commits into
mainfrom
fix/issue-549-wizard-scroll-reset
Open

YosukeMiyata wants to merge 4 commits into
mainfrom
fix/issue-549-wizard-scroll-reset

Conversation

@YosukeMiyata

@YosukeMiyata YosukeMiyata commented Sep 20, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • AppShell の <main overflow-y-auto> 内でスクロールしているため、window 向けの <ScrollRestoration /> ではリセットされず、同一ルートのステップ切替や画面遷移でスクロール位置が引き継がれていた問題を修正
  • useScrollToTop を追加し、スクロール可能な祖先(AppShell の <main> 含む)を先頭へ戻す処理を共通化
  • ルート遷移: AppShellLayout で pathname 変更時にリセット(/{treeId}/... 全般)
  • ウィザード: サンクス送信・分配作成・担当追加・ワークスペース作成・予約分配作成。ロール作成・当番編集のインライン実装もフックに置換
  • タブ / フィルタ: アクティビティ、当番一覧、Quest カンバン(モバイル)
  • デスクトップ master-detail: 当番・分配・予約分配・メンバー一覧の詳細パネル
  • Sheet: ロールシェア送信のステップ切替

Fixes #549

Test plan

  • モバイル幅: サンクス送信 — メンバー一覧を下までスクロール → 「N人に送る」→ 送る量画面の先頭(ヘッダー・スライダー)が表示される
  • サンクス送信: compose ↔ confirm ↔ 戻る の各遷移で先頭に戻る
  • 分配作成・担当追加・ワークスペース作成・予約分配作成: ステップ進行・戻るで先頭に戻る
  • メンバー一覧を下までスクロール → メンバー詳細へ遷移 → 先頭から表示される
  • アクティビティ: リストを下までスクロール → グラフタブ → 先頭から表示される
  • 当番一覧: 「すべて」を下までスクロール → 「あなたの当番」→ 先頭から表示される
  • デスクトップ: 当番 / 分配 / 予約分配 / メンバーのマスターで下の行を選び、詳細パネルが先頭から表示される
  • ロール作成・当番編集: スクロールした一覧から遷移しても先頭から表示される
  • デスクトップ幅: regressions なし

YosukeMiyata and others added 3 commits September 20, 2026 15:45
AppShell scrolls inside <main overflow-y-auto>, so step transitions within
the same route left the user mid-page on mobile. Extract useScrollToTop and
apply it across wizard flows.

Co-authored-by: Cursor <cursoragent@cursor.com>
Updated the useScrollToTop hook to utilize useLayoutEffect for improved scroll handling during component updates. Added logic to reset scroll positions for all vertical scrollable ancestors, ensuring a consistent user experience during wizard step transitions. This addresses issues where users were left mid-page after step changes in the AppShell.
…omponents

Added the useScrollToTop hook to multiple components, ensuring that scroll positions reset appropriately on route changes and key updates. This enhancement improves user experience by maintaining consistent scroll behavior in the AppShell, MasterDetailLayout, and other layouts, addressing issues with mid-page navigation during transitions.
@vercel

vercel Bot commented Sep 20, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
toban Ready Ready Preview Sep 20, 2026 7:09am UTC

Request Review

…proved scroll behavior

Added the useScrollToTop hook to the DesktopMembersView component, ensuring that the scroll position resets when a member is selected. This enhancement improves user navigation and experience by maintaining consistent scroll behavior during member detail transitions.
@YosukeMiyata YosukeMiyata changed the title fix(frontend): ウィザードのステップ切替時にスクロール位置を先頭へリセット (#549) fix(frontend): AppShell 内の画面遷移・ステップ切替でスクロール位置を先頭へリセット (#549) Sep 20, 2026

This branch was successfully deployed

1 active deployment
Preview — b03ad3a9 Deployed Sep 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[frontend] ウィザードのステップ切替時にスクロール位置が引き継がれる(モバイル)

1 participant