diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index a8f004f3a2..884a9cce70 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -295,15 +295,15 @@ const ModelModal: FC<ModelModalProps> = ({
     <Dialog open onOpenChange={handleOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className="w-[640px] max-w-[640px] overflow-hidden p-0"
+        className="flex w-[640px] max-w-[640px] flex-col overflow-hidden p-0"
       >
         <DialogCloseButton className="top-5 right-5 h-8 w-8" />
-        <div className="p-6 pb-3">
+        <div className="shrink-0 p-6 pb-3">
           {modalTitle}
           {modalDesc}
           {modalModel}
         </div>
-        <div className="max-h-[calc(100vh-320px)] overflow-y-auto px-6 py-3">
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
           {
             mode === ModelModalModeEnum.configCustomModel && (
               <AuthForm
@@ -365,7 +365,7 @@ const ModelModal: FC<ModelModalProps> = ({
             )
           }
         </div>
-        <div className="flex justify-between p-6 pt-5">
+        <div className="flex shrink-0 justify-between p-6 pt-5">
           {
             (provider.help && (provider.help.title || provider.help.url))
               ? (
@@ -410,7 +410,7 @@ const ModelModal: FC<ModelModalProps> = ({
         </div>
         {
           (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
-            <div className="border-t-[0.5px] border-t-divider-regular">
+            <div className="shrink-0 border-t-[0.5px] border-t-divider-regular">
               <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
                 <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
                 {t('modelProvider.encrypted.front', { ns: 'common' })}