Skip to content

リアクションスタンプのズレ、WIPの文字がグレーになっていない、を修正#9605

Merged
machida merged 4 commits intomainfrom
hotfix/fix-css
Feb 3, 2026
Merged

リアクションスタンプのズレ、WIPの文字がグレーになっていない、を修正#9605
machida merged 4 commits intomainfrom
hotfix/fix-css

Conversation

@machida
Copy link
Copy Markdown
Member

@machida machida commented Feb 3, 2026

#9604

貼り付けた画像_2026_02_03_17_08

Summary by CodeRabbit

リリースノート

  • スタイル
    • リアクションのドロップダウンの配置と幅を調整しました(表示位置と整列の改善)。
    • 作業中(WIP)カードのタイトルリンクの色を薄めて区別しやすくしました。
    • 長文テキスト内のリンク表示を変更し、通常は下線を表示、ホバー/アクティブ時は下線を消すようにしました。
    • スタンプ内タイトルの縦サイズを調整しました(表示高さの変更)。

@github-actions github-actions Bot requested a review from komagata February 3, 2026 08:09
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Feb 3, 2026

📝 Walkthrough

Walkthrough

リアクションのドロップダウン幅と位置指定を変更、ドロップダウン親の position: relative を削除。カードリストの WIP タイトル色、長文テキスト内リンクの下線挙動、スタンプタイトルの高さをそれぞれCSSで変更(合計4件のスタイル修正)。

Changes

Cohort / File(s) Summary
リアクションドロップダウン
app/assets/stylesheets/application/blocks/reaction/_reaction.css
.reactions__dropdown .reactions__items から left: -1px を削除し width: 218px を追加。さらに .reactions__dropdownposition: relative; を削除。ドロップダウンのレイアウト/位置決めに影響する変更。
カードリスト WIP タイトル
app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css
.card-list-item.is-wip .card-list-item-title__linkcolor: var(--muted-text) を追加し、WIP のタイトルリンク色をミュート化。
長文テキスト内リンクの装飾
app/assets/stylesheets/atoms/_a-long-text.css
.a-long-text 内リンクの初期装飾を underline に変更し、hover/active で下線を除去するように切り替え。
スタンプタイトル高さ指定
app/assets/stylesheets/application/blocks/report/_stamp.css
.stamp__content.is-titleheight: 32% を追加してタイトル領域の垂直サイズを調整。

Sequence Diagram(s)

(該当なし)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • komagata
  • okuramasafumi

Poem

🐰✨ ぽんと幅を伸ばして、位置はすこし控えめに。
WIPはそっと色を落とし、リンクは下線で挨拶する。
スタンプは背を伸ばして、画面がにっこり。

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description check ⚠️ Warning PR 説明は issue 番号と関連する画像を含んでいるが、テンプレートで指定されている「概要」「変更確認方法」「変更前後のスクリーンショット」などの必須セクションが大部分欠落している。 「概要」で変更内容を説明し、「変更確認方法」で検証手順を記載し、「変更前後」のスクリーンショットセクションを追加して、テンプレート構造に準拠させてください。
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed PR タイトルは、リアクションスタンプのズレと WIP の文字色の問題という、changeset の主な変更内容を正確に反映している。
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
  • Post copyable unit tests in a comment
  • Commit unit tests in branch hotfix/fix-css

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css`:
- Around line 182-184: The WIP state (.card-list-item.is-wip) can be overridden
by the existing title hover rule that sets .card-list-item-title__title to
var(--main); add a more specific hover rule targeting the WIP link to preserve
the muted color on hover, e.g. a selector using .card-list-item.is-wip
.card-list-item-title__link:hover and set color: var(--muted-text) so WIP items
stay gray even when hovered.
🧹 Nitpick comments (1)
app/assets/stylesheets/application/blocks/reaction/_reaction.css (1)

25-30: calc(100% - -8px) は可読性が低いので + 8px 表記へ

意図は明確ですが、二重否定は読みづらいので calc(100% + 8px) へ置き換えると保守性が上がります。

🧹 変更案
-  top: calc(100% - -8px);
+  top: calc(100% + 8px);

Comment on lines +182 to +184
.card-list-item.is-wip .card-list-item-title__link {
color: var(--muted-text);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

WIP時のホバー色が上書きされる可能性

既存のホバー規則(Line 69-72)が .card-list-item-title__titlevar(--main) にするため、WIPでもホバー時に青へ戻る可能性があります。WIPは常時グレー表示が要件なら、ホバー時の上書きルールを追加してください。

💡 追加ルール案
 .card-list-item.is-wip .card-list-item-title__link {
   color: var(--muted-text);
 }
+.card-list-item.is-wip a.card-list-item__inner:hover .card-list-item-title__title,
+.card-list-item.is-wip a.card-list-item__inner:hover .card-list-item-title__link {
+  color: var(--muted-text);
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.card-list-item.is-wip .card-list-item-title__link {
color: var(--muted-text);
}
.card-list-item.is-wip .card-list-item-title__link {
color: var(--muted-text);
}
.card-list-item.is-wip a.card-list-item__inner:hover .card-list-item-title__title,
.card-list-item.is-wip a.card-list-item__inner:hover .card-list-item-title__link {
color: var(--muted-text);
}
🤖 Prompt for AI Agents
In `@app/assets/stylesheets/shared/blocks/card-list/_card-list-item.css` around
lines 182 - 184, The WIP state (.card-list-item.is-wip) can be overridden by the
existing title hover rule that sets .card-list-item-title__title to var(--main);
add a more specific hover rule targeting the WIP link to preserve the muted
color on hover, e.g. a selector using .card-list-item.is-wip
.card-list-item-title__link:hover and set color: var(--muted-text) so WIP items
stay gray even when hovered.

@machida machida merged commit 7219d0e into main Feb 3, 2026
3 checks passed
@machida machida deleted the hotfix/fix-css branch February 3, 2026 10:59
@github-actions github-actions Bot mentioned this pull request Feb 3, 2026
1 task
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