fix(ui): BranchCheckoutDropdown をポータル化し下端でフリップする (#1363)#1376
Merged
Conversation
ブランチ checkout メニューは `absolute left-0 top-full z-20` でコンポーネント 自身の subtree 内に描画されており、3つの問題を同時に抱えていた。 1. 祖先による切り取り: Git ペインは `overflow-y-auto` のスクロールコンテナで あり、その外へ張り出すメニューは z-index に関係なくクリップされる 2. 下端はみ出し: `top-full` から常に下方向へ開きフリップが無いため、最大 256px (`max-h-64`) のメニューがトリガー位置次第でビューポート下端を突き抜け、 末尾のブランチが選択できない 3. 低い stacking: `z-20` はペイン内の他のオーバーレイに負けうる メニューを `createPortal(..., document.body)` で body 直下の `fixed` 要素として 描画し、表示時に `getBoundingClientRect()` でトリガーとメニューの実寸を測って、 下に入りきらず かつ 上の余白の方が大きいときのみ上方向へフリップする（通常の 下開きは維持）。上下・左右とも 8px マージンでビューポート内へ clamp し、 メニューがビューポートより大きい場合は開始辺 (top / left) 側を優先して到達可能に する。z-index はオーバーレイ相当 (`z-50`) へ引き上げた。 ポータル化によりメニューは Git ペインのスクロールに追従しなくなるため、 `scroll` (capture: true) と `resize` で再測位してトリガーへのアンカーを保つ。 座標確定までは画面外へ退避させ (0,0) への一瞬の描画を防ぐ。ハンドラ・ data-testid・onCheckout 契約は不変。 回帰テストは jsdom に レイアウトエンジンが無いため getBoundingClientRect を data-testid で判別してスタブし、ポータル先・下開き・上フリップ・両軸 clamp・ スクロール追従・z-index を pin する（修正前のコードでは 9 件中 7 件が失敗し、 残る 2 件は挙動非変更を担保するもの）。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
Closes #1363
Git ペインのブランチ切替ドロップダウンが
absolute left-0 top-full z-20 mt-1 min-w-[12rem] max-h-64 overflow-y-autoで、ポータル未使用・フリップ無し・z-index が低いという3つの問題を抱えていた。変更内容
overflow-y-autoスクロール枠でクリップされうるcreatePortal(..., document.body)でfixedとして描画top-fullから下方向へ最大 256px、フリップ無し → ペイン下部で下端見切れspaceBelowを実測）z-20が低く他のオーバーレイに埋もれるあわせて両軸をビューポート内に clamp する。
テスト
tests/unit/components/git/BranchCheckoutDropdown.test.tsxを新規追加。品質チェック（exit code 実測）
CI=truenpm run test:unit🤖 Generated with Claude Code