fix: prevent modal header jumping when toggling API key field

Reserve fixed height for API key input container and use visibility/opacity
for show/hide instead of conditional rendering to maintain consistent modal
height when selecting presets
This commit is contained in:
Jason
2025-08-27 10:39:39 +08:00
parent 2a43f1f54d
commit 5e2e80b00d
2 changed files with 23 additions and 13 deletions

View File

@@ -255,19 +255,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
/>
</div>
{showApiKey && (
<div className="form-group">
<label htmlFor="apiKey">API Key *</label>
<input
type="text"
id="apiKey"
value={apiKey}
onChange={(e) => handleApiKeyChange(e.target.value)}
placeholder="只需要填这里,下方配置会自动填充"
autoComplete="off"
/>
</div>
)}
<div className={`form-group api-key-group ${!showApiKey ? 'hidden' : ''}`}>
<label htmlFor="apiKey">API Key *</label>
<input
type="text"
id="apiKey"
value={apiKey}
onChange={(e) => handleApiKeyChange(e.target.value)}
placeholder="只需要填这里,下方配置会自动填充"
autoComplete="off"
/>
</div>
<div className="form-group">
<label htmlFor="websiteUrl"></label>