fix(web): constrain dialog overflow layouts (#36302)

2026-05-24 19:07:53 +08:00 · 2026-05-18 14:11:58 +08:00
parent e2c52c9b0f
commit 28818f2e2a
13 changed files with 69 additions and 67 deletions
--- 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">
--- 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,
        )}
      >
--- 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>
--- 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>
--- 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">
--- 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}
--- 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()
--- 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>
--- 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">
--- 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)}
--- 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}
--- 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">
--- 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"