diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 734b39bd41..5b740971cb 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -311,7 +311,7 @@ const ProviderConfigModal: FC<Props> = ({
               onOpenChange={setIsConfigDialogOpen}
               onOpenChangeComplete={handleConfigDialogOpenChangeComplete}
             >
-              <DialogContent className="w-auto max-w-[calc(100vw-1rem)] overflow-visible border-none bg-transparent p-0 shadow-none">
+              <DialogContent className="max-h-[calc(100dvh-1rem)] w-auto max-w-[calc(100vw-1rem)] overflow-visible border-none bg-transparent p-0 shadow-none">
                 <div className="flex items-center justify-center">
                   <div className="mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl">
                     <div className="px-8 pt-8">
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index ed1301386c..8fa022a78b 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -28,7 +28,7 @@ const AccessControlDialog = ({
     <Dialog open={show} disablePointerDismissal onOpenChange={open => !open && close()}>
       <DialogContent
         className={cn(
-          'h-auto max-h-none min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
+          'h-auto max-h-[calc(100dvh-2rem)] min-h-[323px] w-[600px] max-w-none overflow-y-auto rounded-2xl border-none bg-components-panel-bg p-0 shadow-xl transition-all',
           className,
         )}
       >
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index ba08daf9b5..67149deeac 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -289,9 +289,9 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           onClose()
       }}
     >
-      <DialogContent className="max-h-none w-[1140px] max-w-none! min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-[1140px] max-w-none! min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
 
-        <div className="flex h-[680px] flex-wrap">
+        <div className="flex h-full min-h-0 flex-wrap">
           <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
             <div className="mb-5">
               <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index b603243e00..bd3951a485 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -209,9 +209,9 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           onClose()
       }}
     >
-      <DialogContent className="max-h-none w-full min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
+      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] max-h-none! w-full min-w-[1140px] overflow-hidden! border-none p-0! text-left align-middle">
 
-        <div className="relative flex h-[680px] flex-wrap">
+        <div className="relative flex h-full min-h-0 flex-wrap">
           <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
             <div className="mb-5">
               <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 52a52541e9..9fcf9faf43 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -112,7 +112,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
 
   return (
     <Dialog open>
-      <DialogContent className={cn('max-h-none w-full overflow-hidden! border-none text-left align-middle', s.container, 'h-[462px]! w-[362px]! p-0!')}>
+      <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', s.container, 'h-[min(462px,calc(100dvh-2rem))]! max-h-none! w-[362px]! p-0!')}>
 
         {!DISABLE_UPLOAD_IMAGE_AS_ICON && (
           <div className="w-full p-2 pb-0">
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index 4663c55e38..46fb673ce8 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -195,7 +195,7 @@ const TemplateCard = ({
               closeDetailsModal()
           }}
         >
-          <DialogContent className="h-[calc(100vh-64px)] max-h-none w-[calc(100vw-2rem)] max-w-[1680px]! overflow-hidden! rounded-3xl border-none p-0 text-left align-middle">
+          <DialogContent className="h-[calc(100dvh-64px)] max-h-[calc(100dvh-64px)] w-[calc(100vw-2rem)] max-w-[1680px]! overflow-hidden! rounded-3xl border-none p-0 text-left align-middle">
 
             <Details
               id={pipeline.id}
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index 2e3c1f95db..692ea17104 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -59,7 +59,7 @@ const ChunkDetailModal = ({
           onHide()
       }}
     >
-      <DialogContent className={cn('max-h-none overflow-hidden! border-none p-6 text-left align-middle', isParentChildRetrieval ? 'w-[1200px] max-w-none! min-w-[1200px]!' : 'w-[800px] max-w-none! min-w-[800px]!')}>
+      <DialogContent className={cn('max-h-[calc(100dvh-2rem)] overflow-y-auto! border-none p-6 text-left align-middle', isParentChildRetrieval ? 'w-[1200px] max-w-none! min-w-[1200px]!' : 'w-[800px] max-w-none! min-w-[800px]!')}>
         <DialogCloseButton
           onClick={(e) => {
             e.stopPropagation()
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index 4f7f65b8a2..069ad8fa59 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -45,15 +45,15 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
               hideDetailModal()
           }}
         >
-          <DialogContent className="w-full min-w-[800px]! overflow-hidden! border-none text-left align-middle">
+          <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-full min-w-[800px]! flex-col overflow-hidden! border-none text-left align-middle">
             <DialogCloseButton />
-            <DialogTitle className="title-2xl-semi-bold text-text-primary">
+            <DialogTitle className="shrink-0 title-2xl-semi-bold text-text-primary">
               {t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
             </DialogTitle>
 
-            <div className="mt-4 flex-1">
+            <div className="mt-4 flex min-h-0 flex-1 flex-col">
               <ResultItemMeta labelPrefix="Chunk" positionId={positionId} wordCount={content.length} score={score} />
-              <div className={cn('mt-2 body-md-regular break-all text-text-secondary', 'h-[min(539px,80vh)] overflow-y-auto')}>
+              <div className="mt-2 min-h-0 flex-1 overflow-y-auto body-md-regular break-all text-text-secondary">
                 {content}
               </div>
             </div>
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 95e312c4c8..52937f0fd7 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -47,7 +47,7 @@ const TryApp: FC<Props> = ({
           onClose()
       }}
     >
-      <DialogContent className="h-[calc(100vh-32px)] max-h-none w-full max-w-[calc(100vw-32px)] min-w-[1280px] overflow-hidden overflow-x-auto border-none p-2 text-left align-middle">
+      <DialogContent className="h-[calc(100dvh-32px)] max-h-[calc(100dvh-32px)] w-full max-w-[calc(100vw-32px)] min-w-[1280px] overflow-hidden overflow-x-auto border-none p-2 text-left align-middle">
 
         {isLoading ? (
           <div className="flex h-full items-center justify-center">
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 8ceaaaa32e..c750d82160 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -162,67 +162,69 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent
           backdropProps={{ forceRender: true }}
-          className="w-[480px] max-w-[480px] overflow-hidden p-0"
+          className="flex max-h-[calc(100dvh-2rem)] w-[480px] max-w-[480px] flex-col overflow-hidden p-0"
         >
           <DialogCloseButton className="top-5 right-5" />
-          <div className="px-6 pt-6 pr-14 pb-3">
+          <div className="shrink-0 px-6 pt-6 pr-14 pb-3">
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('modelProvider.systemModelSettings', { ns: 'common' })}
             </DialogTitle>
           </div>
-          <div className="flex flex-col gap-4 px-6 py-3">
-            <div className="flex flex-col gap-1">
-              {renderModelLabel('modelProvider.systemReasoningModel.key', 'modelProvider.systemReasoningModel.tip')}
-              <div>
-                <ModelSelector
-                  defaultModel={currentTextGenerationDefaultModel}
-                  modelList={textGenerationModelList}
-                  onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textGeneration, model)}
-                />
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1">
+                {renderModelLabel('modelProvider.systemReasoningModel.key', 'modelProvider.systemReasoningModel.tip')}
+                <div>
+                  <ModelSelector
+                    defaultModel={currentTextGenerationDefaultModel}
+                    modelList={textGenerationModelList}
+                    onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textGeneration, model)}
+                  />
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col gap-1">
-              {renderModelLabel('modelProvider.embeddingModel.key', 'modelProvider.embeddingModel.tip')}
-              <div>
-                <ModelSelector
-                  defaultModel={currentEmbeddingsDefaultModel}
-                  modelList={embeddingModelList}
-                  onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textEmbedding, model)}
-                />
+              <div className="flex flex-col gap-1">
+                {renderModelLabel('modelProvider.embeddingModel.key', 'modelProvider.embeddingModel.tip')}
+                <div>
+                  <ModelSelector
+                    defaultModel={currentEmbeddingsDefaultModel}
+                    modelList={embeddingModelList}
+                    onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textEmbedding, model)}
+                  />
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col gap-1">
-              {renderModelLabel('modelProvider.rerankModel.key', 'modelProvider.rerankModel.tip')}
-              <div>
-                <ModelSelector
-                  defaultModel={currentRerankDefaultModel}
-                  modelList={rerankModelList}
-                  onSelect={model => handleChangeDefaultModel(ModelTypeEnum.rerank, model)}
-                />
+              <div className="flex flex-col gap-1">
+                {renderModelLabel('modelProvider.rerankModel.key', 'modelProvider.rerankModel.tip')}
+                <div>
+                  <ModelSelector
+                    defaultModel={currentRerankDefaultModel}
+                    modelList={rerankModelList}
+                    onSelect={model => handleChangeDefaultModel(ModelTypeEnum.rerank, model)}
+                  />
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col gap-1">
-              {renderModelLabel('modelProvider.speechToTextModel.key', 'modelProvider.speechToTextModel.tip')}
-              <div>
-                <ModelSelector
-                  defaultModel={currentSpeech2textDefaultModel}
-                  modelList={speech2textModelList}
-                  onSelect={model => handleChangeDefaultModel(ModelTypeEnum.speech2text, model)}
-                />
+              <div className="flex flex-col gap-1">
+                {renderModelLabel('modelProvider.speechToTextModel.key', 'modelProvider.speechToTextModel.tip')}
+                <div>
+                  <ModelSelector
+                    defaultModel={currentSpeech2textDefaultModel}
+                    modelList={speech2textModelList}
+                    onSelect={model => handleChangeDefaultModel(ModelTypeEnum.speech2text, model)}
+                  />
+                </div>
               </div>
-            </div>
-            <div className="flex flex-col gap-1">
-              {renderModelLabel('modelProvider.ttsModel.key', 'modelProvider.ttsModel.tip')}
-              <div>
-                <ModelSelector
-                  defaultModel={currentTTSDefaultModel}
-                  modelList={ttsModelList}
-                  onSelect={model => handleChangeDefaultModel(ModelTypeEnum.tts, model)}
-                />
+              <div className="flex flex-col gap-1">
+                {renderModelLabel('modelProvider.ttsModel.key', 'modelProvider.ttsModel.tip')}
+                <div>
+                  <ModelSelector
+                    defaultModel={currentTTSDefaultModel}
+                    modelList={ttsModelList}
+                    onSelect={model => handleChangeDefaultModel(ModelTypeEnum.tts, model)}
+                  />
+                </div>
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-end gap-2 px-6 pt-5 pb-6">
+          <div className="flex shrink-0 items-center justify-end gap-2 px-6 pt-5 pb-6">
             <Button
               className="min-w-[72px]"
               onClick={() => setOpen(false)}
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index 9808b87627..b0667a9ee0 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -167,12 +167,12 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
           foldAnimInto()
       }}
     >
-      <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
+      <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, `shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
         border-components-panel-border bg-components-panel-bg p-0`))}
       >
         <DialogCloseButton />
 
-        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+        <div className="flex shrink-0 items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
           <div className="flex grow flex-col items-start gap-1">
             <div className="self-stretch title-2xl-semi-bold text-text-primary">
               {getTitle()}
@@ -192,7 +192,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
               />
             )
           : (
-              <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
+              <div className={`flex min-h-0 flex-1 flex-col items-start justify-center self-stretch overflow-y-auto px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
                 {state.step === InstallStepFromGitHub.setUrl && (
                   <SetURL
                     repoUrl={state.repoUrl}
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
index b4f0741eb2..45ce5980ac 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -42,7 +42,7 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
         onChange={e => onChange(e.target.value)}
         className="shadows-shadow-xs flex grow items-center gap-[2px] self-stretch
           overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2
-          system-sm-regular text-ellipsis text-components-input-text-filled"
+          system-sm-regular text-ellipsis text-components-input-text-filled outline-hidden"
         placeholder="Please enter GitHub repo URL"
       />
       <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index b7f720b370..cb188f69cf 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -76,7 +76,7 @@ const ConversationVariableModal = ({
 
   return (
     <Dialog open>
-      <DialogContent className={cn('max-h-none w-full overflow-hidden! border-none text-left align-middle', cn('h-[640px] w-[920px] max-w-[920px] p-0'))}>
+      <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', cn('h-[min(640px,calc(100dvh-2rem))] max-h-none! w-[920px] max-w-[calc(100vw-2rem)] p-0'))}>
 
         <button
           type="button"