Skip to content

fix(gui): Open Project Recent click does not open project (user-select default swallows click)#2748

Merged
akiojin merged 3 commits into
developfrom
work/20260515-1356
May 16, 2026
Merged

fix(gui): Open Project Recent click does not open project (user-select default swallows click)#2748
akiojin merged 3 commits into
developfrom
work/20260515-1356

Conversation

@akiojin
Copy link
Copy Markdown
Owner

@akiojin akiojin commented May 15, 2026

Summary

  • Issue fix(gui): Open Project Recent click is swallowed by user-select default on span children #2746 を解消し、Open Project ▾ split-button dropdown 内の Recent エントリと、Project Picker overlay の Recent エントリの両方でクリックがプロジェクトを開くようにする。
  • 原因は Issue fix(gui): project tab label click does not switch tabs (user-select default swallows click) #2744 (.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-rowuser-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 warnings
  • cargo fmt --check
  • cargo build -p gwt --bin gwt --bin gwtd
  • target/debug/gwt を起動し curl http://127.0.0.1:<port>/styles/app.css で配信される CSS に user-select: none; が含まれることを確認
  • 手動 GUI 検証: Open Project ▾ dropdown を開き Recent エントリをクリックして対象プロジェクトが開くこと
  • 手動 GUI 検証: 全タブを閉じて picker overlay の Recent をクリックしても同様にプロジェクトが開くこと

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes

    • Recent projects now display full paths in tooltips when project names are truncated.
    • Prevented accidental text selection on recent project rows.
    • Fixed layout handling for recent projects in dropdown menus to prevent content overflow.
  • Tests

    • Added regression test to validate recent project row styling and tooltip behavior.

Review Change Stack

…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>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

Warning

Rate limit exceeded

@akiojin has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 52 minutes and 45 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 17861942-6294-4877-a105-ca02798e17ea

📥 Commits

Reviewing files that changed from the base of the PR and between f8e3067 and 6402597.

📒 Files selected for processing (2)
  • crates/gwt/web/styles/app.css
  • package.json
📝 Walkthrough

Walkthrough

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

Changes

Recent Projects UI Fixes

Layer / File(s) Summary
CSS layout and selection constraints
crates/gwt/web/styles/app.css
.split-button-menu-recent constrains grid columns with minmax(0, 1fr). .split-button-menu-recent-row sets min-width: 0 and user-select: none to prevent overflow and unwanted text selection. .recent-project-row sets user-select: none for picker overlay rows.
Tooltip implementation for full-path display
crates/gwt/web/app.js
renderRecentProjects and renderRecentProjectsIntoMenu assign native title tooltip to each row with the full ${project.kind} · ${project.path} value, ensuring hidden metadata is accessible on hover.
Test coverage and script registration
crates/gwt/web/__tests__/recent-row-style.test.mjs, package.json
Comprehensive Node test module validates CSS rule presence (grid-template-columns, user-select, min-width) and scans app.js to confirm tooltip title assignments. Test is registered in the test:frontend-unit npm script.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

  • akiojin/gwt#2746: This PR implements the regression test follow-up to validate the CSS and tooltip fixes originally addressed in issue #2746.

Possibly related PRs

  • akiojin/gwt#2685: Both PRs touch the recent-projects UI and renderRecentProjects* code paths in the split-button dropdown.
  • akiojin/gwt#2686: Both PRs modify recent-projects menu rendering in crates/gwt/web/app.js, affecting the same dropdown behavior and DOM structure.

Suggested labels

javascript

Poem

🐰 A recent path now shines so clear,
With tooltips full and grids sincere,
No text shall flee or selection creep,
The rows stay tight, the tests keep,
CSS and JS in harmony sleep! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly addresses the main fix—preventing user-select from swallowing clicks on Recent entries—and matches the core changes in CSS and JS that add user-select: none and title tooltips.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch work/20260515-1356

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@akiojin akiojin enabled auto-merge May 15, 2026 14:28
akiojin and others added 2 commits May 16, 2026 13:27
…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>
@akiojin akiojin merged commit 131d07c into develop May 16, 2026
13 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