はじめに
Input Assistant for Claude Code の v1.12.1 をリリースした。
今回のメインは 入力タブのレイアウト刷新 だ。機能は変わっていない。
「見た目をちゃんとしたい」という動機だけで手を入れた。
AI選択UIのカード化
これまで入力タブの AI 選択は、ラジオボタンの横並びだった。
○ Claude Code ○ Codex ○ Gemini ○ VS Code Chat
機能的には問題なかった。ただ、サイドバーが少し狭くなるとラベルが詰まって見た目が崩れやすく、どれが選択中かもひと目でわかりにくかった。
v1.12.1 でカード型 UI に変更した。各 AI がアイコン付きのカードとして並び、選択中のカードがハイライトされる。
「どれが選ばれているか」が見た目で明確になったのと、幅が変わっても崩れにくくなった。
レスポンシブ対応：480px 前後が一番変わる
今回、Container Queries を使って 600px / 480px / 400px の3段階でレイアウトが切り替わるようにした。
VS Code のサイドバーは標準的な使い方で 480px 前後になることが多い。この幅あたりで一番変化を感じられる。
変わったもの:
- タブヘッダーが詰まったら横スクロール可能に
- ボタングループが幅に応じて折り返す
- Skills ドロップダウンがビューポートからはみ出さないよう制約
これまでサイドバーを狭くすると UI がはみ出したり重なったりすることがあった。Container Queries を使うことで、親コンテナの幅を基準にレイアウトを切り替えられる。@media では viewport 幅しか見られないので、サイドバーのような「ページ内の一部」には Container Queries の方が素直に書ける。
/* Container Queries の使い方イメージ */
.input-panel {
container-type: inline-size;
}
@container (max-width: 480px) {
.button-group {
flex-wrap: wrap;
}
}
@container (max-width: 400px) {
.tab-header {
overflow-x: auto;
}
}
正直なところ
機能追加ではないので「これが便利になりました」と言いにくいリリースだ。
ただ、ラジオボタンのままだと「ちゃんと作られている感」が薄いな、とずっと感じていた。毎日自分で使うものなので、見た目の質も積み重なって体験に影響する。
今回の変更は自分が気持ちよく使い続けるために入れたもの、という認識が正直なところだ。
その他の変更点
細かいバグ修正・改善を含む。詳細は CHANGELOG.md を参照。
インストール・更新
VS Code Marketplace で "Input Assistant for Claude Code" を検索するか、以下から。