AI Overviewの送信ボタンが一部テーマで横長楕円になる問題を修正

[claude]

Requested by NAGAHAMA Bissy Yuki · Slack thread

現状

#122 で送信ボタン(hamelp/ai-overview ブロックの ↑ ボタン)をテーマ CSS の上書きに強くしたが、その後も一部のテーマで送信ボタンが横に伸びて楕円になる不具合が残っていた。border-radius:50% 自体は効いている(=#122 のスコープは機能している)が、幅だけが高さより広くなり円が横長の楕円になる。

原因

#122 で打ち消したのは高さ軸だけ(min-height:0 / max-height:none)で、幅軸は打ち消していなかった。そのため、テーマ側の

• button { min-width: <N>px }
• form button[type=submit] { min-width: 12rem; padding: … }

のようなルールが適用されると、ボタンの幅だけが伸びて楕円になっていた。min-width はセレクタの詳細度に関係なく width を上書きする(スコープ済みルールに min-width が無いためテーマ値がそのまま floor として効く)ことが原因。

Chromium で実機検証した結果:

ホスタイルテーマ	修正前 (幅×高さ)	判定
button,.wp-block-button__link { min-width:220px }	220 × 40	楕円
form button[type=submit] { min-width:12rem; padding-left/right:2rem }	192 × 40	楕円
button { width:100% }	40 × 40	円(#122 の width が勝つ)
button { display:block; width:auto }	40 × 40	円
button { min-height:56px; padding:14px 28px }(高さ系)	40 × 40	円(#122 で対策済み)

→ 犯人は min-width。

変更後

.hamelp-ai-overview .hamelp-ai-overview__button(詳細度 0,2,0 = #122 と同じスコープ)に幅軸のニュートラライザを追加:

min-width: 0;
max-width: none;

width: var(--hamelp-btn-size) と flex: none は従来どおり保持し、幅を送信ボタンサイズに固定する。!important は不要(検証した全ベクターに対して 0,2,0 で勝てることを確認済み)。#122 のスコープ・clamp・センタリング・ヒント・focus-visible・ルートの width:100% などは一切変更していない。

検証(修正後)

全ベクター + 高さ系 + テーマ無しベースラインで再レンダリングし、いずれも width == height == var(--hamelp-btn-size)(ワイドで 40px、360px 幅で ~44px)・border-radius:50%(真円)・矢印中央を確認:

ケース	修正後 (幅×高さ @wide / @360)	判定
ベースライン(テーマ無し)	40×40 / 43.98×43.98	円
min-width:220px	40×40 / 43.98×43.98	円
width:100%	40×40 / 43.98×43.98	円
min-width:12rem submit	40×40 / 43.98×43.98	円
display:block; width:auto	40×40 / 43.98×43.98	円
min-height:56px; padding:14px 28px	40×40 / 43.98×43.98	円

アイコン(↑)は全ケースで 20×20 を維持。

npm run lint:js / npm run lint:css / php -l hamelp.php いずれもパス。

🤖 Generated with Claude Code

https://claude.ai/code/session_01RCRKyC4sroy5Xk144DGJdS

---

Generated by Claude Code

[claude]

AI トリアージ: PR #124

リスク: 🟢 低（CSS 2行追加のみ）
スコープ: `scope:css`
不足: なし

サマリー

• AI Overviewブロックの送信ボタンをテーマCSSの上書きに強くする #122 で未対処だった幅軸の問題を、min-width:0 / max-width:none の2行追加で補完する CSS バグ修正。
• CSS のみの変更でロジック・PHP・REST API に影響なし。

詳細レビュー

テスト要否

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

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

1. 詳細度の正しさ（確認済み・懸念なし）
   .hamelp-ai-overview .hamelp-ai-overview__button = 詳細度 (0,2,0)。PR 説明が列挙した全ホスタイルパターン（button=0,0,1 / .wp-block-button__link=0,1,0 / form button[type=submit]=0,1,2）はいずれも負けるため、!important なしで成立する。計算は正確。

2. max-width:none の選択（確認済み・懸念なし）
   none は max-width の初期値そのもので、「上限なし」を意味する。initial でも等価だが none が慣用的かつ明示的で問題なし。

3. position:absolute + min-width:0 の相互作用（懸念なし）
   ボタンは position:absolute で通常フローから外れているため、親コンテナの flex フォーマットの影響は受けない。ただし min-width はボックスモデルとして絶対配置要素にも適用されるため、min-width:0 のニュートラライズは有効かつ必要。

4. flex:none との組み合わせ（懸念なし）
   flex:none（= flex: 0 0 auto）は仮にボタンが flex アイテムになった場合の防衛策として既存から存在。min-width:0 の追加後も flex-shrink:0 との矛盾はなく、幅は var(--hamelp-btn-size) に固定される。

設計上の懸念

なし。#122 のスコープ設計（構造プロパティのみ 0,2,0 で上書き、cosmetics は :where() で低優先度維持）に完全に沿っており、既存パターンを踏襲した最小限の変更。

---

🤖 AI triage — 自動生成レビューです。最終判断はメンテナーが行ってください。