From 21f47fbe58f480aa30ed6fedb3bde7dfce5c1184 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Tue, 13 Jan 2026 11:12:51 +0800
Subject: [PATCH] fix(sandbox-provider): fix config modal header spacing and
 icon style

- Use custom header with 8px gap between title and subtitle
- Fix icon overflow-clip for proper border-radius
---
 .../sandbox-provider-page/config-modal.tsx         | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx b/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
index 6da9ae8aa6..45cf913bf1 100644
--- a/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
+++ b/web/app/components/header/account-setting/sandbox-provider-page/config-modal.tsx
@@ -112,14 +112,18 @@ const ConfigModal = ({
     <Modal
       isShow
       onClose={onClose}
-      title={t('sandboxProvider.configModal.title', { ns: 'common' })}
       closable
       className="w-[480px]"
     >
-      {/* Provider subtitle */}
-      <div className="-mt-2 mb-4 flex items-center gap-2">
-        <ProviderIcon providerType={provider.provider_type} />
-        <span className="system-md-regular text-text-secondary">{provider.label}</span>
+      {/* Custom Header: Title + Subtitle with 8px gap */}
+      <div className="mb-4 flex flex-col gap-2">
+        <h3 className="title-2xl-semi-bold text-text-primary">
+          {t('sandboxProvider.configModal.title', { ns: 'common' })}
+        </h3>
+        <div className="flex items-center gap-2">
+          <ProviderIcon providerType={provider.provider_type} />
+          <span className="system-md-regular text-text-secondary">{provider.label}</span>
+        </div>
       </div>
 
       <BaseForm