Prism copy button が Tailwind preflight に負けて非表示になる問題 (2630. Memoize II) #323

概要

PR #322 のコードレビュー中に、public/JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html にて、Prism.js の copy button 用 CSS override が !important を使用していないため、Tailwind CSS の preflight によってボタンが非表示になったり崩れたりする可能性があることが指摘されました。

関連リンク

• PR: LeetCode 83: Remove Duplicates from Sorted List の追加とマルチドメイン UI 改善 #322
• レビューコメント: https://github.com/myoshi2891/Algorithm-DataStructures-Math-Study/pull/322#discussion_r2917303562
• リクエスト者: @myoshi2891

問題の詳細

CLAUDE.md のアーキテクチャガイドラインでは「Prism.js の copy button スタイリングは Tailwind preflight による非表示を防ぐために !important CSS override を使用すること」と規定されています。

現在の .code-toolbar > .toolbar および .code-toolbar > .toolbar .toolbar-item button のスタイルに !important が付与されておらず、Tailwind preflight の button リセットルールにより copy button が意図しない見た目になる可能性があります。

修正方針

以下のプロパティに !important を追加する:

• .code-toolbar > .toolbar の opacity: 0
• .code-toolbar:hover > .toolbar の opacity: 1
• .toolbar-item button / .copy-to-clipboard-button の display, visibility, opacity, background, color, border, cursor, box-shadow

影響範囲

同ファイル内の対象スタイルブロック（約 Line 55 付近および Line 2183–2187 付近）。