From 40fd8fe104f779dde0298367c9c5cedbcacb5da5 Mon Sep 17 00:00:00 2001
From: lpf <lipengfei886@qq.com>
Date: Wed, 11 Mar 2026 20:36:33 +0800
Subject: [PATCH] fix ui

---
 .../components/config/ProviderConfigSection.tsx    | 14 +++++++-------
 webui/src/index.css                                |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/webui/src/components/config/ProviderConfigSection.tsx b/webui/src/components/config/ProviderConfigSection.tsx
index 0154d1a..91dd1f6 100644
--- a/webui/src/components/config/ProviderConfigSection.tsx
+++ b/webui/src/components/config/ProviderConfigSection.tsx
@@ -114,29 +114,29 @@ export function ProviderRuntimeToolbar({
   return (
     <div className="flex items-center justify-between gap-2 flex-wrap">
       <div className="text-sm font-semibold text-zinc-200">{t('configProxies')}</div>
-      <div className="flex items-center gap-2">
-        <Button onClick={onRefreshRuntime} size="xs" radius="lg" variant="neutral" gap="2">
+      <div className="flex items-center gap-2 flex-wrap justify-end">
+        <Button onClick={onRefreshRuntime} size="xs" radius="lg" variant="neutral" gap="2" noShrink>
           <RefreshCw className="w-4 h-4" />
           {t('providersRefreshRuntime')}
         </Button>
-        <label className="flex items-center gap-2 rounded-xl border border-zinc-800 bg-zinc-900/30 px-2 py-1.5 text-[11px] text-zinc-300">
+        <label className="flex shrink-0 items-center gap-2 rounded-xl border border-zinc-800 bg-zinc-900/30 px-2 py-1.5 text-[11px] whitespace-nowrap text-zinc-300">
           <CheckboxField checked={runtimeAutoRefresh} onChange={(e) => onRuntimeAutoRefreshChange(e.target.checked)} />
           {t('providersAutoRefresh')}
         </label>
-        <SelectField dense value={String(runtimeRefreshSec)} onChange={(e) => onRuntimeRefreshSecChange(Number(e.target.value || 10))} className="bg-zinc-900/70 border-zinc-700">
+        <SelectField dense value={String(runtimeRefreshSec)} onChange={(e) => onRuntimeRefreshSecChange(Number(e.target.value || 10))} className="min-w-[136px] bg-zinc-900/70 border-zinc-700">
           <option value="2">2s</option>
           <option value="5">5s</option>
           <option value="10">10s</option>
           <option value="30">30s</option>
         </SelectField>
-        <SelectField dense value={runtimeWindow} onChange={(e) => onRuntimeWindowChange(e.target.value as 'all' | '1h' | '24h' | '7d')} className="bg-zinc-900/70 border-zinc-700">
+        <SelectField dense value={runtimeWindow} onChange={(e) => onRuntimeWindowChange(e.target.value as 'all' | '1h' | '24h' | '7d')} className="min-w-[156px] bg-zinc-900/70 border-zinc-700">
           <option value="1h">{t('providersRuntime1h')}</option>
           <option value="24h">{t('providersRuntime24h')}</option>
           <option value="7d">{t('providersRuntime7d')}</option>
           <option value="all">{t('providersRuntimeAll')}</option>
         </SelectField>
-        <TextField dense value={newProxyName} onChange={(e) => onNewProxyNameChange(e.target.value)} placeholder={t('configNewProviderName')} className="bg-zinc-900/70 border-zinc-700" />
-        <Button onClick={onAddProxy} variant="primary" size="xs" radius="lg" gap="2">
+        <TextField dense value={newProxyName} onChange={(e) => onNewProxyNameChange(e.target.value)} placeholder={t('configNewProviderName')} className="min-w-[168px] bg-zinc-900/70 border-zinc-700" />
+        <Button onClick={onAddProxy} variant="primary" size="xs" radius="lg" gap="2" noShrink>
           <Plus className="w-4 h-4" />
           {t('add')}
         </Button>
diff --git a/webui/src/index.css b/webui/src/index.css
index 446c33e..6fe2c73 100644
--- a/webui/src/index.css
+++ b/webui/src/index.css
@@ -795,6 +795,7 @@ html.theme-dark .brand-button {
   align-items: center;
   justify-content: center;
   min-height: 40px;
+  white-space: nowrap;
   border-radius: var(--radius-button);
   border: 1px solid transparent;
   line-height: 1;