Skip to content

fix(sidebar): resolve post-compaction UX issues — resize, tooltip, overflow#657

Merged
Kewton merged 1 commit intodevelopfrom
feature/651-worktree
Apr 14, 2026
Merged

fix(sidebar): resolve post-compaction UX issues — resize, tooltip, overflow#657
Kewton merged 1 commit intodevelopfrom
feature/651-worktree

Conversation

@Kewton
Copy link
Copy Markdown
Owner

@Kewton Kewton commented Apr 14, 2026

Summary

  • ドラッグリサイズ: PC版サイドバーの右端をドラッグして幅を変更可能(160〜480px)。幅はlocalStorageに永続化
  • 同期ボタン溢れ修正: SortSelectorBasecompactプロップを追加し、サイドバー内ではラベルテキストを非表示にすることでヘッダー内に収まるよう修正
  • グループヘッダー背景色削除: ツリー表示のリポジトリグループヘッダーからbg-gray-800/50 hover:bg-gray-800を除去
  • ツールチップ修正: ReactDOM.createPortalでdocument.bodyにレンダリングすることでoverflow-y:autoによるクリッピングを解消。サイドバー右側にposition:fixedで表示(左寄せ)

Changed Files

File Change
src/components/layout/AppShell.tsx 動的width適用、ResizeHandleコンポーネント追加
src/contexts/SidebarContext.tsx width localStorage同期追加(288→224マイグレーション)
src/components/sidebar/SortSelectorBase.tsx compactプロップ追加
src/components/sidebar/SortSelector.tsx compactを渡す
src/components/layout/Sidebar.tsx GroupHeaderの背景色削除
src/components/sidebar/BranchListItem.tsx ツールチップをReact portalに変更

Test plan

  • npx tsc --noEmit — 0 errors
  • npm run lint — 0 errors/warnings
  • npm run test:unit — 334 files, 6319 tests passed

🤖 Generated with Claude Code

…erflow

- Add drag-resize handle to PC sidebar (160px–480px, persisted to localStorage)
- Fix SortSelector label overflow by adding compact prop to SortSelectorBase
- Remove background color from grouped-view repository headers
- Fix tooltip clipping via React portal; position to right of sidebar (fixed coords)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Kewton Kewton merged commit ee2dabc into develop Apr 14, 2026
5 checks passed
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.

1 participant