通知ベルのピル型タブでcursor: pointerが効かない問題を修正

[komagata]

問題

通知ベル（画面右上）のモーダル内にある「未読」「全て」のピル型タブをマウスオーバーしてもポインターが変わらない。

原因

_pill-nav.css で cursor: pointer が div.pill-nav__item-link にのみ適用されていた。通知ベルのタブは button.pill-nav__item-link なので、div セレクタにマッチしなかった。

修正

div.pill-nav__item-link → .pill-nav__item-link に変更し、要素タイプに関係なく cursor: pointer が適用されるようにした。

Summary by CodeRabbit

リリースノート

• スタイル
  • ピルナビゲーション要素のカーソルスタイルの適用範囲を拡大しました。

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS セレクタが div.pill-nav__item-link から .pill-nav__item-link に変更され、要素タイプに関係なく cursor: pointer スタイルが適用される範囲が拡大されました。

Changes

Cohort / File(s)	Summary
CSS セレクタの汎用化 app/assets/stylesheets/shared/blocks/_pill-nav.css	div.pill-nav__item-link から .pill-nav__item-link へセレクタを変更。cursor: pointer ルールが div 要素以外にも適用されるようになりました。

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• shibainurou
• okuramasafumi

Poem

🐰✨ CSS の小さな調べ
セレクタを広げて、さらに優雅に
div の枠を取り払い
あらゆる要素が指を指す
ポイントとなるその先へ

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	プルリクエストのタイトルは、CSSセレクタ変更によるcursor: pointer問題の修正という主要な変更を明確に表現している。
Description check	✅ Passed	プルリクエストの説明は、問題、原因、修正の3つのセクションで構成されており、テンプレートの主要要素を満たしている。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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 fix/pill-nav-cursor-pointer

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

app/assets/stylesheets/shared/blocks/_pill-nav.css (1)

51-53: セレクタの重複を解消してコードを整理しましょう。

セレクタを div.pill-nav__item-link から .pill-nav__item-link に変更したことで、button 要素にも cursor: pointer が適用されるようになり、問題が解決されています。

ただし、現在 .pill-nav__item-link セレクタが2箇所（22-49行目と51-53行目）に分かれており、保守性が低下しています。cursor: pointer プロパティを既存のルール（22-35行目）に統合することをお勧めします。

♻️ セレクタを統合する提案

 .pill-nav__item-link {
   display: block;
   text-decoration: none;
   font-size: 0.75rem;
   line-height: 2.3;
   text-align: center;
   white-space: nowrap;
   color: var(--muted-text);
   border: solid 1px var(--border-shade);
   border-left-width: 0.5px;
   border-right-width: 0.5px;
   width: 7rem;
   transition: all 0.2s ease-out;
+  cursor: pointer;
 }
 .pill-nav__item:first-child .pill-nav__item-link {
   border-left-width: 1px;
 }
 .pill-nav__item:last-child .pill-nav__item-link {
   border-right-width: 1px;
 }
 .pill-nav__item-link:hover {
   background-color: var(--background-more-tint);
 }
 .pill-nav__item-link.is-active {
   background-color: var(--main);
   color: var(--reversal-text);
   border-color: var(--main);
 }
-
-.pill-nav__item-link {
-  cursor: pointer;
-}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/assets/stylesheets/shared/blocks/_pill-nav.css` around lines 51 - 53, 現在
.pill-nav__item-link セレクタが重複しているので、後続の単独ルール（.pill-nav__item-link { cursor:
pointer; }）を削除して、既存の .pill-nav__item-link ルール（最初に定義されているブロック）に cursor: pointer
を統合してください。これにより button 等への適用は維持しつつ重複を解消し、スタイルの保守性を向上させます。

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/assets/stylesheets/shared/blocks/_pill-nav.css`:
- Around line 51-53: 現在 .pill-nav__item-link
セレクタが重複しているので、後続の単独ルール（.pill-nav__item-link { cursor: pointer; }）を削除して、既存の
.pill-nav__item-link ルール（最初に定義されているブロック）に cursor: pointer を統合してください。これにより button
等への適用は維持しつつ重複を解消し、スタイルの保守性を向上させます。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2e7e5c1b-3f06-4662-8b70-3ca8ef32b0c2

📥 Commits

Reviewing files that changed from the base of the PR and between ad44c68 and 2eca9b7.

📒 Files selected for processing (1)

• app/assets/stylesheets/shared/blocks/_pill-nav.css

[github-actions]

🚀 Review App

URL: https://bootcamp-pr-9828-fvlfu45apq-an.a.run.app

Basic認証: fjord / (ステージングと同じ)
PR更新時に自動で再デプロイされます。