fix(gui): Open Project Recent click does not open project (user-select default swallows click)#2748
Conversation
…t default swallows click) Closes #2746 `.split-button-menu-recent-row` と `.recent-project-row` は `<button>` だが 子要素として `<span class="...title">` と `<span class="...meta">` を持つ。 これらの span は user-select 指定がないため WebKit (wry GUI) で `user-select: auto` を継承し、わずかな pointer のブレで browser がテキスト 選択ドラッグと判定して click を swallow していた。dropdown は閉じず、 プロジェクトも開かない症状になっていた。 Issue #2744 が同じ root cause pattern を `.project-tab` で確定済みのため、 両 selector に `user-select: none` を 1 行ずつ追加して mirror する。回帰防止 test (crates/gwt/web/__tests__/recent-row-style.test.mjs) を新規追加し、 CSS rule に `user-select: none` が含まれることを assert する。 検証: pnpm test:frontend-unit (468 pass) / pnpm test:frontend-smoke (17 pass) / cargo test -p gwt --lib (637 pass) / cargo clippy -p gwt --all-targets --all-features -- -D warnings / cargo fmt --check / curl で配信される app.css が `user-select: none` を含むことを確認。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR improves the recent-projects UI by adding CSS layout constraints to prevent text overflow, implementing full-path tooltips on recent-project buttons to reveal truncated metadata on hover, and adding regression tests to validate both the CSS and tooltip changes. ChangesRecent Projects UI Fixes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…ce full path on hover Refs #2746 PR #2748 の user-select fix で click は通るようになったが、E2E 検証で 2 つの follow-up を発見: 1. Recent 行の hover 背景が dropdown 右端を 27px はみ出していた。原因は `.split-button-menu-recent` の grid が implicit `auto` track で、長い meta path に合わせて column 幅が膨らんでいたこと。`grid-template-columns: minmax(0, 1fr)` で column を menu 内側に固定し、`.split-button-menu-recent-row` に `min-width: 0` を追加して flex column の min-content 既定を解除した。 これで meta span の `text-overflow: ellipsis` が実際に発火する。 2. meta が ellipsis されると、どのディレクトリか判別できなくなった。各 Recent 行に `title="${kind} · ${path}"` を付け、native hover/focus tooltip で full path を提示する。dropdown 側 (`renderRecentProjectsIntoMenu`) と picker overlay 側 (`renderRecentProjects`) の両方に適用。 回帰防止: `crates/gwt/web/__tests__/recent-row-style.test.mjs` に 4 件の assertion を追加 (grid-template-columns / min-width / 両 renderer の row.title 代入を string match で検査、計 6 tests pass)。 検証: pnpm test:frontend-unit (471 pass) / pnpm test:frontend-smoke (17 pass) / cargo fmt --check / 実 browser (target/debug/gwt @ Playwright MCP) で Recent 行が menu 内に収まり、meta が ellipsis され、row.title が `${kind} · ${path}` に設定されることを確認。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
# Conflicts: # package.json
Summary
.project-tab) と完全に同じ pattern:<button>の子に<span class="...title">と<span class="...meta">を持つがuser-select指定がなく、WebKit (wry GUI) で span がuser-select: autoを継承するため、わずかな pointer ブレで browser がテキスト選択ドラッグと判定してclickを swallow していた。.split-button-menu-recent-rowと.recent-project-rowにuser-select: noneを 1 行ずつ追加して mirror。crates/gwt/web/__tests__/recent-row-style.test.mjsを新規追加し、両 selector の CSS rule にuser-select: noneが含まれることを assert。Test plan
pnpm test:frontend-unit(468 pass, recent-row-style.test.mjs を新規登録)pnpm test:frontend-smoke(17 pass)cargo test -p gwt --lib(637 pass)cargo clippy -p gwt --all-targets --all-features -- -D warningscargo fmt --checkcargo build -p gwt --bin gwt --bin gwtdtarget/debug/gwtを起動しcurl http://127.0.0.1:<port>/styles/app.cssで配信される CSS にuser-select: none;が含まれることを確認🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
Tests