[ 編集画面 ] パディング設定で数値欄が狭くて見づらいのを修正

[sysbird]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

[編集画面] グループのパディング設定で数値の入力欄が狭い #1184

どういう変更をしたか？

編集画面で単位がある箇所(余白など)の数値が見えづらくなっていたので修正

• [原因] Lightning で追加した単位のなかに lvmax など長い文字列があるため、数値欄が圧迫されて狭くなってた
• [解決方法] 数値欄と単位欄の余白を狭く調整 (0にしたり、8px →4px、16px → 8px など微調整)

変更前 Before

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

• 書けそうなテストは書いたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

• グループブロックのサイズ: パディング、マージンのカスタム設定で数値欄に2〜3桁を入力し、3桁ほど目視できるか確認
• 小数点がある場合も確認 (em など)
• 短い単位 (%) 、長い単位 (dvmax) についても確認
• 単位を入力する箇所のすべてに影響があるので、Lightning の単位が関係ない箇所についても確認
  • たとえば 枠線の幅、フォントサイズでも余白が小さくなっているので、不自然でないか目視
• g2、g3 で確認

レビュワーに回す前の確認事項

• 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

• 実装者が確認した手順と同じです

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？
• キャッシュをクリアして確認したか？

[mtdkei]

ありがとうございます。G3、G2で確認しました。入力しやすくなっていました！
2人目の方お願いいたします。

[kurudrive]

@sysbird ありがとうございます。
Cc: @goutetsuguma @mtdkei

うーむ、これなんでしょうね...そもそも TT4 とかだとこうはならないので何が原因かわからない...
ただ、!important は最終手段なので、以下の方がいいかなと思いますがどうでしょう？

.components-base-control .components-input-control__container select.components-unit-control__select {
	padding-left:0;
	padding-right:0;
	max-width: 38px;
}
.components-base-control .components-input-control__container input.components-input-control__input {
	padding-left:8px;
}

[goutetsuguma]

@kurudrive

うーむ、これなんでしょうね...そもそも TT4 とかだとこうはならないので何が原因かわからない...

こちらは鳥さんが書いていただいているようにthemes.jsonから追加した単位が原因のようです。

[原因] Lightning で追加した単位のなかに lvmax など長い文字列があるため、数値欄が圧迫されて狭くなってた

試しにLightning の themes.json の"units"からTT4などでは表示されない単位を削除したら入力フォームが正常になりました。

[kurudrive]

@goutetsuguma @sysbird @mtdkei
なるほど...まぁ今更単位減らすと既に使ってる人いると困るので、CSS補正でいきましょう。
で、!important はまぁ最後の手段なので、セレクタ増やして上書きしました。