概要
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 によってボタンが非表示になったり崩れたりする可能性があることが指摘されました。
関連リンク
問題の詳細
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 付近)。
概要
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 によってボタンが非表示になったり崩れたりする可能性があることが指摘されました。関連リンク
問題の詳細
CLAUDE.mdのアーキテクチャガイドラインでは「Prism.js の copy button スタイリングは Tailwind preflight による非表示を防ぐために!importantCSS 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 付近)。