【UI】快速粘贴弹窗中粘贴已有 Key 后输入框内容导致超出弹窗/页面（overflow）

[mhy1227]

现象描述

在「供应商管理/配置」页面打开【快速粘贴】弹窗后，将已有的 API Key（或包含长字符串的配置文本）粘贴到输入框内，输入区域出现不换行/宽度溢出，导致内容区域超出弹窗边界甚至超出页面可视区域，影响查看与操作（如下图）。

---

复现步骤

1. 进入：供应商管理 →（某供应商）→ 配置页面
2. 点击【快速粘贴】打开弹窗
3. 在粘贴输入框中粘贴已有 Key（例如 sk-... 这类长串，或包含 URL/模型名等文本）
4. 观察弹窗内输入区域的展示效果

---

实际结果（Actual）

• 粘贴后输入框内容不自动换行，出现横向溢出/超出弹窗边界（输入区域看起来“跑出”弹窗右侧/页面）
• 影响用户正常阅读、复制校对、点击按钮等操作（可补充：是否挡住「应用」按钮/是否需要横向滚动）

---

期望结果（Expected）

• 输入框内容应在弹窗内自动换行或提供可控的横向滚动，且不应突破弹窗宽度
• 弹窗布局在不同分辨率下保持稳定，按钮区域可正常点击

---

复现概率

没计算,粘贴好几次都是这种情况

---

可能原因/建议方向

• 输入框/容器缺少换行与溢出控制（如 white-space / word-break / overflow-x / max-width）
• 建议：对粘贴区域设置 max-width: 100%，并启用 word-break: break-all; white-space: pre-wrap;（或允许横向滚动但不外溢）

---

[github-actions]

Thank you for reporting this issue with detailed description and screenshot.

Analysis:

I have verified this bug in the codebase. The overflow issue occurs in two places within the Quick Paste dialog:

1. Textarea input area (lines 115-121)

src/app/[locale]/settings/providers/_components/forms/provider-form/components/quick-paste-dialog.tsx (lines 115-121):

<Textarea
  value={rawText}
  onChange={(e) => handleTextChange(e.target.value)}
  placeholder={t("placeholder")}
  rows={6}
  className="font-mono text-sm"
/>

The Textarea only has font-mono text-sm styling without any break-all, overflow-x-auto, or overflow-wrap handling for long unbroken strings like API keys.

2. Key preview display (line 161)

src/app/[locale]/settings/providers/_components/forms/provider-form/components/quick-paste-dialog.tsx (line 161):

<span className="text-sm font-mono">{maskKey(parsed.key)}</span>

The key display lacks overflow control. Notably, the URL display on line 145 has proper handling with truncate max-w-[280px], but the key display on line 161 does not have equivalent styling.

Root cause:

The issue reporter's analysis is correct - the input/preview areas lack proper white-space, word-break, and overflow CSS properties to contain long unbroken strings within the dialog boundaries.

Similar patterns in the codebase:

The codebase already has working solutions for similar cases:

• src/components/ui/code-display.tsx:390 uses break-all for long file names
• src/app/[locale]/settings/error-rules/_components/rule-list-table.tsx:117 uses break-all font-mono for long strings

---

Automated response from Claude AI