接入模型抽屉:输入框一屏装得下 —— 供应商收成一行小签,身份两栏并排

上一版量出来是真看不见:视口 577 高、抽屉身只有 442px,而「模型」落在 y=557、
「用途名」落在 y=649 —— **定义这条实例是什么的两个字段全在折线以下**,点开只看得见
供应商牌子和端点。病根是把最不决定性的东西摆得最大:5 枚 146px 宽的大牌子一个人吃掉 118px。

重排(按决定性从大到小,且一屏装得下):
  · 供应商 → **一行小签**(圆角 chip,默认端点挂 title),118px → 30px;
  · 身份 → **用途名 + 模型两栏并排**(短字段不该各占一整行);
  · 连接 → 端点 + 密钥 + 测试连接;
  · 开关收进末段,说明并进同一行。
  段距 16→13、头尾 padding 各收 3–4px,长句说明砍短。

实测同一视口:四个输入框底边 258 / 258 / 366 / 450,**全部落在可视区(≤520)**;
「测试连接」487 也在;编辑态整屏不用滚(scrollHeight ≤ clientHeight)。
保存往返、密钥留空保持原值、Esc 与遮罩关闭,全部复核过。五闸绿。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/app/styles/console.css

@@ -324,33 +324,34 @@
 @keyframes g-slidein { from { transform: translateX(24px); opacity: .6; } }
 @media (prefers-reduced-motion: reduce) { .g-drawer-veil, .g-drawer-p { animation: none; } }
 
-.g-drawer-p > header { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line-soft); }
-.g-drawer-p > header b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
-.g-drawer-p > header span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--ink-4); }
+.g-drawer-p > header { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line-soft); }
+.g-drawer-p > header b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
+.g-drawer-p > header span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }
 .g-drawer-p > header .x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-4); cursor: pointer; }
 .g-drawer-p > header .x:hover { border-color: var(--cline); background: #f3f6fa; color: var(--ink); }
 
 .g-drawer-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 18px; }
-.g-drawer-b section { padding: 16px 0 4px; }
+.g-drawer-b section { padding: 13px 0 3px; }
+.g-drawer-b section.tight { padding: 11px 0 4px; }
 .g-drawer-b section + section { border-top: 1px solid var(--line-soft); }
-.g-drawer-b h4 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
+.g-drawer-b h4 { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
 
-.g-drawer-p > footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line-soft); background: #fbfcfd; }
+.g-drawer-p > footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--line-soft); background: #fbfcfd; }
 
-/* 供应商牌子:挑一个即预填它的默认端点 —— 接入面的第一步本来就是「谁家的」 */
-.g-picktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
-.g-picktile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border: 1px solid var(--cline); border-radius: 9px; background: #fff; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
-.g-picktile:hover { border-color: #aebdcd; }
-.g-picktile.on { border-color: var(--brand); background: var(--brand-wash); }
-.g-picktile .n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
-.g-picktile .s { font: 500 10px/1.3 var(--mono); color: var(--ink-4); }
-.g-picktile.on .s { color: var(--brand-deep); }
-.g-picktile svg { position: absolute; right: 9px; top: 9px; color: var(--brand); }
+/* 供应商:一行小签 —— 挑一个即预填它的默认端点。
+   从前是 146px 宽的大牌子,一个人吃掉 118px 高,把下面的输入框全顶出屏幕。 */
+.g-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
+.g-chip { padding: 6px 11px; border: 1px solid var(--cline); border-radius: 15px; background: #fff; font: 500 12px/1.2 var(--sans); color: var(--ink-3); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
+.g-chip:hover { border-color: #aebdcd; color: var(--ink); }
+.g-chip.on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); font-weight: 600; }
 
 /* 竖排字段:标签在上、输入居中、说明在下 —— 抽屉里一列到底,不做两栏 */
-.g-fld { display: block; margin-bottom: 14px; }
-.g-fld > span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2, var(--ink)); }
-.g-fld small { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.6; color: var(--ink-4); }
+.g-fld { display: block; margin-bottom: 11px; }
+.g-fld > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2, var(--ink)); }
+.g-fld small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
+.g-fld small.warn { color: #a83a3a; }
+/* 两栏:短字段并排 —— 一屏装得下才叫表单 */
+.g-fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
 .g-inwrap { position: relative; display: block; }
 .g-inwrap .g-input { width: 100%; padding-right: 34px; }
 .g-inwrap .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-4); cursor: pointer; }
@@ -364,7 +365,8 @@
 .g-hint { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.6; color: var(--ink-4); }
 
 /* 开关行:两枚复选框并排 —— 表单里唯一的横排 */
-.g-swrow { display: flex; align-items: center; gap: 18px; }
+.g-swrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
+.g-swrow small { flex: 1 1 100%; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
 .g-swrow label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, var(--ink)); cursor: pointer; }
 .g-swrow input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }