AI Overviewブロックの送信ボタンをテーマCSSの上書きに強くする

[claude]

Requested by NAGAHAMA Bissy Yuki · Slack thread

現状（バグ）

一部のテーマで、AI Overview ブロック（hamelp/ai-overview）の丸い送信ボタン（↑）が、巨大な四角形として描画され、矢印が消える／中央からずれることがあった（テスト3テーマ中2テーマで再現、ニュートラルなテーマでは正常）。

原因: ブロックのスタイルはすべて詳細度 0 の :where(...) で書かれている。そのため、テーマ側のボタン向けルール（.wp-block-button__link、素の button、form button[type=submit] など、詳細度 0,0,1〜0,1,1）が、こちらの width／height／min-height／padding／border-radius を上書きし、40px の円形ボタンがテーマの min-height:56px; padding:14px 28px; border-radius:6px; width:auto 等で四角く肥大化していた。

変更後

ボックス系・レイアウト系（構造的）プロパティだけを .hamelp-ai-overview を前置きした子孫セレクタ（詳細度 0,2,0）にスコープ化し、テーマの典型的なボタンセレクタに確実に勝つようにした。!important は不要（0,2,0 で上記の攻撃的テーマに勝てることを実測で確認）。

• min-height:0 と padding:0 でテーマ注入の min-height／padding を明示的に打ち消し
• max-height:none でテーマの高さ上限をガード
• box-sizing:border-box／line-height:1／flex:none で寸法を固定
• アイコン（.hamelp-ai-overview__button-icon）の width/height:20px も同じ詳細度で固定し、テーマの button svg 等で矢印がリサイズ・押し出されないようにした

色・背景（グラデーション）・transition・:hover・:focus-visible の色などの装飾系プロパティは従来どおり :where()（詳細度 0）のまま残し、テーマからのカスタマイズ性を意図的に維持している。:focus-visible のみ（:focus/:focus-within は使わない）というキーボード限定の挙動、タッチデバイスでのヒント非表示（@media (hover:none) and (pointer:coarse)）もそのまま維持。

How（どのセレクタをスコープ化したか）

src/blocks/ai-overview/style.scss:

セレクタ	Before	After	スコープ化したプロパティ
送信ボタン	:where(.hamelp-ai-overview__button)	.hamelp-ai-overview .hamelp-ai-overview__button	position/right/bottom/display/flex/align-items/justify-content/box-sizing/width/height/min-height:0/max-height:none/padding:0/border-radius:50%/line-height:1
ボタンアイコン	:where(.hamelp-ai-overview__button-icon)	.hamelp-ai-overview .hamelp-ai-overview__button-icon	width/height（20px）
入力行	:where(.hamelp-ai-overview__input-row)	.hamelp-ai-overview .hamelp-ai-overview__input-row	position:relative/display:flex
textarea	:where(.hamelp-ai-overview__input)（1ルール）	:where(...)（装飾）＋ .hamelp-ai-overview .hamelp-ai-overview__input（構造）	box-sizing/padding/field-sizing/min-height/resize/align-content

送信ボタンの background/グラデーション・color・cursor・transition、:hover/:focus-visible/:disabled、textarea の flex/border/background/color/font-*/line-height/max-height は :where() のまま。

検証

コンパイル済みブロック CSS を読み込んだ後に攻撃的なテーマ CSS を注入するハーネスで、Chromium にて実測（desktop 640px / 360px、devicePixelRatio 2）:

button, .wp-block-button__link { min-height:56px; height:auto; width:auto; padding:14px 28px; border-radius:6px; line-height:1.6; }
form button[type=submit] { min-height:60px; padding:16px; }

計測結果（ボタンの実描画ボックス）:

条件	修正前	修正後
攻撃的テーマあり @640px	54 × 60px（四角・radius 6px・padding 16px・min-height 60px）	40 × 40px（円形 radius 50%・padding 0・min-height 0）
攻撃的テーマあり @360px	―	44 × 44px（円形）
攻撃的テーマなし @640px（回帰確認）	40 × 40px	40 × 40px（変化なし）

いずれもアイコンは 20×20px でボタン中心にセンタリング（中心からのオフセット 0px）。矢印が消える／四角化する問題が解消され、テーマなしでも回帰なし。

• npm run lint:js / npm run lint:css: pass
• php -l hamelp.php: No syntax errors
• （phpcs はプロキシ制約で未実行だが、変更は SCSS のみで WPCS 対象外）

🤖 Generated with Claude Code

https://claude.ai/code/session_01RCRKyC4sroy5Xk144DGJdS

---

Generated by Claude Code

[claude]

AI トリアージ: PR #122

リスク: 🟢 低（CSS のみ、ロジック変更なし）
スコープ: scope:css scope:block
不足: needs-screenshot

サマリー

• :where() 詳細度 0 のボタンスタイルがテーマの button/.wp-block-button__link に上書きされ円形ボタンが巨大な四角に化ける問題を、構造系プロパティのみを .hamelp-ai-overview .hamelp-ai-overview__button（詳細度 0,2,0）にスコープ化して修正。
• position: absolute もスコープ済み（line 158）であり、コミットメッセージと一致を確認。
• 実視覚確認用スクリーンショット（修正前後・テーマあり/なし）が PR 本文に添付されていないため needs-screenshot を付与。

詳細レビュー

テスト要否

• ⚪ テスト不要: src/blocks/ai-overview/style.scss — CSS/アセット変更のみ（ルール 7）

レビュワーが確認すべき箇所

1. style.scss:92 — max-height: 8lh が :where() (0,0,0) のまま。テーマが textarea { max-height: Xpx; } (0,0,1) を持つ場合に上書きされ得る。今回の修正対象の主症状（ボタン四角化）とは直接関係なく意図的に残されたと読めるが、将来的に問題になり得る点として記録。

2. style.scss:82 — flex: 1 がテキストエリアに対して :where() のまま。テーマが textarea { flex: 0; } を設定すると入力欄が収縮するが、テーマが flex を textarea に指定するケースは稀。

3. style.scss:326–347 — エディタープレビュー用 hamelp-ai-overview__preview textarea は引き続き :where() で構造プロパティを定義。ブロックエディターは iframe 分離があるためフロントと同条件にはならないが、Editor Canvas がフレームレスな環境（iframe: false テーマ）では同様の上書き問題が起きる可能性はある。影響範囲はプレビュー見た目のみ。

設計上の懸念

構造/装飾の分割方針は正確で一貫している。

種別	セレクタ	詳細度
構造（位置・寸法・padding・border-radius）	.hamelp-ai-overview .hamelp-ai-overview__button	0,2,0
装飾（色・背景・transition・hover/focus）	:where(.hamelp-ai-overview__button)	0,0,0

!important を使わず 0,2,0 のみでテーマの form button[type=submit] (0,1,1) に勝てることを実測で確認済み（PR 本文内の検証テーブル）。この方針は WordPress コアの is-style-* パターンと整合しており、テーマカスタマイズの余地を意図的に残している。

assets/ は .gitignore 済みのため、SCSS ソースのみの変更で問題なし（ビルドは CI が担う）。