fix(web): keep every dialog within the viewport through its styling contract (#45686)

oxlint-suppressions.json

@@ -205,9 +205,6 @@
     }
   },
   "web/app/components/app/app-access-control/access-control-dialog.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    },
     "shadcn/no-restyle": {
       "count": 1
     }
@@ -412,11 +409,6 @@
       "count": 4
     }
   },
-  "web/app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 4
-    }
-  },
   "web/app/components/app/configuration/config/automatic/idea-output.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 2
@@ -450,11 +442,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config/config-audio.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 4
@@ -487,9 +474,6 @@
     }
   },
   "web/app/components/app/configuration/dataset-config/params-config/index.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    },
     "eslint-react/set-state-in-effect": {
       "count": 1
     },
@@ -2786,11 +2770,6 @@
       "count": 1
     }
   },
-  "web/app/components/explore/try-app/index.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 3
-    }
-  },
   "web/app/components/explore/try-app/preview/agent-app-preview.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 1
@@ -2976,11 +2955,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 2
-    }
-  },
   "web/app/components/plugins/marketplace/__tests__/hooks.spec.tsx": {
     "typescript/no-deprecated": {
       "count": 2
@@ -3011,11 +2985,6 @@
       "count": 20
     }
   },
-  "web/app/components/plugins/marketplace/detail-dialog/frame.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/marketplace/empty/index.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 4
@@ -4675,11 +4644,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 3
@@ -4730,11 +4694,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 1
@@ -5088,11 +5047,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/llm/components/structure-output.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/llm/use-config.ts": {
     "eslint-react/set-state-in-effect": {
       "count": 1
@@ -5567,11 +5521,6 @@
       "count": 5
     }
   },
-  "web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 9
-    }
-  },
   "web/app/components/workflow/panel/debug-and-preview/hooks.ts": {
     "no-restricted-imports": {
       "count": 2
@@ -6002,9 +5951,6 @@
     }
   },
   "web/app/components/workflow/workflow-generator/index.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
-    },
     "dify/require-disable-directive-description": {
       "count": 1
     }
@@ -6122,11 +6068,6 @@
       "count": 3
     }
   },
-  "web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx": {
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 6
-    }
-  },
   "web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/index.tsx": {
     "better-tailwindcss/enforce-logical-properties": {
       "count": 11
@@ -6200,9 +6141,6 @@
   "web/features/agent-v2/agent-detail/configure/components/preview/working-directory-panel.tsx": {
     "@tanstack/query/prefer-query-options": {
       "count": 2
-    },
-    "better-tailwindcss/enforce-logical-properties": {
-      "count": 1
     }
   },
   "web/features/agent-v2/agent-detail/logs/components/log-detail-panel.tsx": {

packages/tooling/lint.config.ts

@@ -336,17 +336,27 @@ export const stylingContractRules = {
           pattern: '^(Dialog|AlertDialog)Content$',
           allow: [
             'w-*',
-            'min-w-*',
-            'max-w-*',
             'h-*',
-            'min-h-*',
-            'max-h-*',
+            'max-w-[calc(100vw-*rem)]',
+            'max-h-[calc(100dvh-*rem)]',
+            'max-h-[*dvh]',
+            'max-h-[min(*,calc(100dvh-*rem))]',
+            'min-h-[min(*,calc(100dvh-*rem))]',
             'overflow-hidden',
             'transition-none',
           ],
-          deny: ['max-w-none', 'max-h-none', 'w-screen', 'h-screen'],
+          deny: [
+            'w-[*]',
+            'h-[min(*)]',
+            'h-[calc(*)]',
+            'h-[*%]',
+            'h-[*px]',
+            'h-[*rem]',
+            'w-screen',
+            'h-screen',
+          ],
           message:
-            '"{{className}}" is outside the {{component}} styling contract. The surface owns position, chrome and scrolling, and its parts own spacing; callers may size it within the viewport or disable transitions. Compose DialogPortal, DialogBackdrop and DialogPopup for a custom surface.',
+            '"{{className}}" is outside the {{component}} styling contract. The surface owns position, chrome and scrolling, and keeps itself within the viewport. Size it with w-* and h-* (h-dvh fills the viewport). Change the viewport margin with max-w-[calc(100vw-Nrem)] or max-h-[calc(100dvh-Nrem)], and bound a height cap or floor by the viewport, e.g. max-h-[80dvh] or min-h-[min(20rem,calc(100dvh-2rem))]. Compose DialogPortal, DialogBackdrop and DialogPopup for a custom surface.',
         },
         {
           pattern: '^DialogPopup$',

packages/tooling/plugins/eslint/hint-content.test.ts

@@ -198,7 +198,7 @@ it('keeps centered dialogs on DialogContent while DialogPopup places custom surf
   const diagnostics = lintFixture(`
     import { DialogContent, DialogPopup } from '@langgenius/dify-ui/dialog'
     const examples = <>
-      <DialogContent className="max-h-[calc(100dvh-2rem)] w-160 overflow-hidden" />
+      <DialogContent className="w-160 overflow-hidden" />
       <DialogPopup className="fixed top-2 right-2 bottom-2 flex w-160 flex-col overflow-hidden rounded-xl" />
       <DialogPopup className="fixed top-1/2 left-1/2 w-120 -translate-x-1/2 -translate-y-1/2" />
     </>
@@ -208,6 +208,38 @@ it('keeps centered dialogs on DialogContent while DialogPopup places custom surf
     expect(diagnostics.some(({ message }) => message.includes(`"${className}"`))).toBe(true)
 })
 
+it('keeps dialog sizes within the viewport bound owned by the surface', () => {
+  const diagnostics = lintFixture(`
+    import { DialogContent } from '@langgenius/dify-ui/dialog'
+    import { AlertDialogContent } from '@langgenius/dify-ui/alert-dialog'
+    const examples = <>
+      <DialogContent className="h-170 w-285 xl:h-170 sm:w-132" />
+      <DialogContent className="h-dvh w-full max-h-[calc(100dvh-1rem)] max-w-[calc(100vw-1rem)]" />
+      <DialogContent className="h-[85dvh] max-h-[80dvh]" />
+      <DialogContent className="max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)]" />
+      <DialogContent className="max-h-[min(44rem,calc(100dvh-2rem))] min-h-[min(22.5rem,calc(100dvh-2rem))]" />
+      <DialogContent className="max-w-120 max-h-200 min-w-140 min-h-90 max-h-[80%]" />
+      <AlertDialogContent className="w-[min(960px,calc(100vw-2rem))] h-[min(680px,calc(100dvh-2rem))] h-[calc(100dvh-16px)]" />
+      <DialogContent className="max-w-[calc(100vw-32px)] max-h-[min(44rem,32rem)]" />
+    </>
+  `)
+  const rejected = [
+    'max-w-120',
+    'max-h-200',
+    'min-w-140',
+    'min-h-90',
+    'max-h-[80%]',
+    'w-[min(960px,calc(100vw-2rem))]',
+    'h-[min(680px,calc(100dvh-2rem))]',
+    'h-[calc(100dvh-16px)]',
+    'max-w-[calc(100vw-32px)]',
+    'max-h-[min(44rem,32rem)]',
+  ]
+  expect(diagnostics).toHaveLength(rejected.length)
+  for (const className of rejected)
+    expect(diagnostics.some(({ message }) => message.includes(`"${className}"`))).toBe(true)
+})
+
 it('keeps centered dialog layout owned by the surface', () => {
   const diagnostics = lintFixture(`
     import { DialogContent } from '@langgenius/dify-ui/dialog'

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -20,13 +20,15 @@ const AccessControlDialog = ({ className, children, show, onClose }: DialogProps
 
   return (
     <Dialog open={show} disablePointerDismissal onOpenChange={(open) => !open && close()}>
-      <DialogContent className={cn('min-h-80.75 w-150 transition-all', className)}>
+      <DialogContent
+        className={cn('min-h-[min(20.1875rem,calc(100dvh-2rem))] w-150 transition-all', className)}
+      >
         <DialogClose
           render={
             <IconButton
               aria-label={t(($) => $['operation.close'], { ns: 'common' })}
               size="lg"
-              className="absolute top-5 right-5"
+              className="absolute inset-e-5 top-5"
             >
               <span aria-hidden className="i-ri-close-line size-4" />
             </IconButton>

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

@@ -51,11 +51,11 @@ const TryLabel: FC<{
   return (
     <button
       type="button"
-      className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
+      className="me-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
       <span aria-hidden className={`${iconClassName} size-4 text-text-tertiary`} />
-      <div className="ml-1 text-xs font-medium text-text-secondary">{text}</div>
+      <div className="ms-1 text-xs font-medium text-text-secondary">{text}</div>
     </button>
   )
 }
@@ -268,9 +268,9 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-285 xl:h-[min(680px,calc(100dvh-2rem))] xl:overflow-hidden">
+      <DialogContent className="w-285 xl:h-170 xl:overflow-hidden">
         <div className="flex min-h-0 flex-col xl:h-full xl:flex-row">
-          <div className="min-w-0 border-divider-regular p-6 xl:h-full xl:flex-1 xl:overflow-y-auto xl:border-r">
+          <div className="min-w-0 border-divider-regular p-6 xl:h-full xl:flex-1 xl:overflow-y-auto xl:border-e">
             <div className="mb-5">
               <DialogTitle
                 // oxlint-disable-next-line shadcn/no-restyle -- Gradient generator title keeps its own type; the module class paints the gradient.
@@ -298,7 +298,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             {isBasicMode && (
               <div className="mt-4">
                 <div className="flex items-center">
-                  <div className="mr-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
+                  <div className="me-3 shrink-0 text-xs leading-4.5 font-semibold text-text-tertiary uppercase">
                     {t(($) => $['generate.tryIt'], { ns: 'appGeneration' })}
                   </div>
                   <div

web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx

@@ -189,9 +189,9 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = ({
         if (!open) onClose()
       }}
     >
-      <DialogContent className="h-[min(680px,calc(100dvh-2rem))] w-full min-w-285 overflow-hidden">
+      <DialogContent className="h-170 w-full overflow-hidden">
         <div className="relative flex h-full min-h-0 flex-wrap">
-          <div className="h-full w-142.5 shrink-0 overflow-y-auto border-r border-divider-regular p-6">
+          <div className="h-full w-142.5 shrink-0 overflow-y-auto border-e border-divider-regular p-6">
             <div className="mb-5">
               <div className={`text-lg leading-7 font-bold ${s.textGradient}`}>
                 {t(($) => $['codegen.title'], { ns: 'appGeneration' })}

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -125,7 +125,7 @@ const ParamsConfig = ({ disabled, selectedDatasets }: ParamsConfigProps) => {
             }
           }}
         >
-          <DialogContent className="w-120 p-6 sm:min-w-132">
+          <DialogContent className="w-120 p-6 sm:w-132">
             <ConfigContent
               datasetConfigs={tempDataSetConfigs}
               onChange={handleSetTempDataSetConfigs}
@@ -134,7 +134,7 @@ const ParamsConfig = ({ disabled, selectedDatasets }: ParamsConfigProps) => {
 
             <div className="mt-6 flex justify-end">
               <Button
-                className="mr-2 shrink-0"
+                className="me-2 shrink-0"
                 onClick={() => {
                   setTempDataSetConfigs(datasetConfigs)
                   setRerankSettingModalOpen(false)

web/app/components/app/deploy/deployment-dialog/index.tsx

@@ -73,7 +73,7 @@ export function DeploymentDialogContent({
     <DialogContent
       initialFocus={titleRef}
       finalFocus={finalFocus}
-      className="max-h-[min(44rem,calc(100dvh-32px))]"
+      className="max-h-[min(44rem,calc(100dvh-2rem))]"
     >
       <DeploymentDialogSession {...sessionProps} titleRef={titleRef} />
     </DialogContent>

web/app/components/app/tracing/config-popup.tsx

@@ -234,7 +234,7 @@ export function ConfigPopup({
             )}
           </div>
           {!readOnly && (
-            <DialogContent initialFocus={firstInputRef} className="max-h-[calc(100dvh-2rem)] w-160">
+            <DialogContent initialFocus={firstInputRef} className="w-160">
               {provider && (
                 <ProviderConfigModal
                   resource={resource}

web/app/components/base/upgrade-modal/index.tsx

@@ -39,9 +39,7 @@ export function UpgradeModal({
 }: UpgradeModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className={cn(styles.surface, 'w-145 max-w-120 overflow-hidden', classNames?.content)}
-      >
+      <DialogContent className={cn(styles.surface, 'w-120 overflow-hidden', classNames?.content)}>
         <div className="relative">
           <div
             aria-hidden

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -180,7 +180,7 @@ const TemplateCard = ({ pipeline, showMoreOperations = true, type }: TemplateCar
         />
         <DialogContent
           // oxlint-disable-next-line shadcn/no-restyle -- Full-page template preview keeps its larger radius.
-          className="h-[calc(100dvh-64px)] max-h-[calc(100dvh-64px)] w-[1680px] overflow-hidden rounded-3xl"
+          className="h-dvh max-h-[calc(100dvh-4rem)] w-420 overflow-hidden rounded-3xl"
         >
           <Details
             id={pipeline.id}

web/app/components/datasets/hit-testing/components/chunk-detail-dialog.tsx

@@ -71,13 +71,7 @@ export function ChunkDetailDialog({ payload, open, onOpenChange }: ChunkDetailDi
       >
         <ResultItemFooter docType={extensionToFileType(extension)} docTitle={document.name} />
       </DialogTrigger>
-      <DialogContent
-        finalFocus={triggerRef}
-        className={cn(
-          'max-h-[calc(100dvh-2rem)] min-w-0',
-          isParentChildRetrieval ? 'w-300' : 'w-200',
-        )}
-      >
+      <DialogContent finalFocus={triggerRef} className={isParentChildRetrieval ? 'w-300' : 'w-200'}>
         <DialogHeader>
           <DialogTitle>
             {t(($) => $[`${i18nPrefix}chunkDetail`], { ns: 'datasetHitTesting' })}

web/app/components/explore/try-app/index.tsx

@@ -102,14 +102,14 @@ function TryAppContent({
       <IconButton
         size="lg"
         variant="tertiary"
-        className="absolute top-2 right-2"
+        className="absolute inset-e-2 top-2"
         aria-label={t(($) => $['operation.close'], { ns: 'common' })}
         onClick={onClose}
       >
         <span aria-hidden className="i-ri-close-line size-5" />
       </IconButton>
       <Tabs defaultValue={TypeEnum.DETAIL} className="flex h-full flex-col">
-        <div className="flex shrink-0 pr-10 pl-4">
+        <div className="flex shrink-0 ps-4 pe-10">
           <TabsList>
             <TabsTab
               ref={detailTabRef}
@@ -253,7 +253,7 @@ function TryApp(props: Props) {
       <DialogContent
         initialFocus={detailTabRef}
         // oxlint-disable-next-line shadcn/no-restyle -- Full-page Try App surface keeps its 8px inset.
-        className="h-[calc(100dvh-16px)] max-h-[calc(100dvh-16px)] w-full max-w-[calc(100vw-16px)] overflow-hidden p-2"
+        className="h-dvh max-h-[calc(100dvh-1rem)] w-full max-w-[calc(100vw-1rem)] overflow-hidden p-2"
       >
         <TrialAppAccessBoundary key={props.appId} appId={props.appId} onClose={props.onClose}>
           <TryAppContent {...props} detailTabRef={detailTabRef} />

web/app/components/header/account-setting/access-rules-page/permission-set-modal/index.tsx

@@ -80,7 +80,7 @@ const PermissionSetModalBody = ({
   }
 
   return (
-    <DialogContent className="h-[85vh] w-140" backdropProps={{ forceRender: true }}>
+    <DialogContent className="h-[85dvh] w-140" backdropProps={{ forceRender: true }}>
       <form
         className="contents"
         onSubmit={(event) => {

web/app/components/header/account-setting/permissions-page/role-modal/index.tsx

@@ -75,7 +75,7 @@ const RoleModal = ({ mode, open, role, onClose, onSubmit }: RoleModalProps) => {
         if (!nextOpen) onClose()
       }}
     >
-      <DialogContent className="h-[85vh] w-140" backdropProps={{ forceRender: true }}>
+      <DialogContent className="h-[85dvh] w-140" backdropProps={{ forceRender: true }}>
         <DialogHeader>
           <DialogTitle>{t(($) => $[`role.modal.${mode}.title`], { ns: 'permission' })}</DialogTitle>
           <DialogDescription>

web/app/components/header/account-setting/update-setting-dialog.tsx

@@ -85,7 +85,7 @@ export function UpdateSettingDialog({ category }: Props) {
           </Button>
         }
       />
-      <DialogContent className="max-w-[calc(100vw-32px)]">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>
             {t(($) => $['autoUpdate.autoUpdateSettings'], { ns: 'plugin' })}

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -74,7 +74,7 @@ const InstallBundle: FC<Props> = ({
     >
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className={cn('w-120', modalClassName, 'max-h-[calc(100dvh-48px)] min-w-140')}
+        className={cn('w-140', modalClassName, 'max-h-[calc(100dvh-3rem)]')}
       >
         <DialogHeader>
           <DialogTitle>{getTitle()}</DialogTitle>

web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -200,7 +200,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({
       <DialogContent
         initialFocus={repoUrlInputRef}
         backdropProps={{ forceRender: true }}
-        className={cn('w-140', modalClassName, 'max-h-[calc(100dvh-48px)]')}
+        className={cn('w-140', modalClassName, 'max-h-[calc(100dvh-3rem)]')}
       >
         <DialogHeader>
           <DialogTitle>{getTitle()}</DialogTitle>

web/app/components/plugins/install-plugin/install-from-local-package/index.tsx

@@ -94,7 +94,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     >
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className={cn('w-140', modalClassName, 'max-h-[calc(100dvh-48px)]')}
+        className={cn('w-140', modalClassName, 'max-h-[calc(100dvh-3rem)]')}
       >
         <DialogHeader>
           <DialogTitle>{getTitle()}</DialogTitle>

web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx

@@ -87,9 +87,9 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
     >
       <DialogContent
         backdropProps={{ forceRender: true }}
-        className={cn('max-h-[calc(100dvh-48px)] w-140', modalClassName)}
+        className={cn('max-h-[calc(100dvh-3rem)] w-140', modalClassName)}
       >
-        <div className="flex shrink-0 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 ps-6 pe-14 pt-6 pb-3">
           <DialogTitle>{getTitle()}</DialogTitle>
         </div>
         {isBundle ? (

web/app/components/plugins/marketplace/detail-dialog/frame.tsx

@@ -84,7 +84,7 @@ export default function MarketplaceDetailDialogFrame({
             an invisible cross-origin frame. */}
       <DialogContent
         initialFocus={closeButtonRef}
-        className="h-[min(800px,calc(100dvh-48px))] w-[min(1200px,calc(100vw-48px))] overflow-hidden"
+        className="h-200 max-h-[calc(100dvh-3rem)] w-300 max-w-[calc(100vw-3rem)] overflow-hidden"
       >
         <DialogTitle className="sr-only">{title}</DialogTitle>
         <div
@@ -134,7 +134,7 @@ export default function MarketplaceDetailDialogFrame({
                 ref={closeButtonRef}
                 aria-label={t(($) => $['operation.close'], { ns: 'common' })}
                 size="lg"
-                className="absolute top-5 right-5 z-10"
+                className="absolute inset-e-5 top-5 z-10"
               >
                 <span aria-hidden className="i-ri-close-line size-4" />
               </IconButton>

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -34,7 +34,7 @@ export const CommonCreateModal = ({ open = true, onClose, createType, builder }:
       <DialogContent
         backdropProps={{ forceRender: true }}
         className={cn(
-          'max-h-[80%] min-h-90',
+          'max-h-[80dvh] min-h-[min(22.5rem,calc(100dvh-2rem))]',
           createType === SupportedCreationMethods.MANUAL && 'w-160',
         )}
       >

web/app/components/plugins/readme-panel/dialog.tsx

@@ -17,7 +17,7 @@ export function ReadmeDialog({ detail, open, onOpenChange, triggerId }: ReadmeDi
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} triggerId={triggerId}>
-      <DialogContent className="h-[calc(100dvh-16px)] w-200 overflow-hidden">
+      <DialogContent className="h-dvh w-200 overflow-hidden">
         <ReadmePanelContent
           detail={detail}
           title={

web/app/components/share/text-generation/info-modal.tsx

@@ -24,7 +24,7 @@ const InfoModal = ({ isShow, onClose, data }: Props) => {
         if (!open) onClose()
       }}
     >
-      <DialogContent className="w-100 min-w-100 overflow-hidden">
+      <DialogContent className="w-100 overflow-hidden">
         <DialogClose
           render={
             <IconButton

web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx

@@ -30,7 +30,7 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
   return (
     <Dialog open={isShow} onOpenChange={onClose} disablePointerDismissal>
       <DialogContent
-        className="w-154.5 max-w-154.5"
+        className="w-154.5"
         backdropProps={{ className: 'bg-workflow-canvas-canvas-overlay' }}
       >
         <DialogHeader>

web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx

@@ -301,7 +301,7 @@ function AgentRosterInlineConfigureDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
       <DialogTrigger render={trigger} />
-      <DialogContent className="h-[min(760px,calc(100dvh-32px))] w-[min(1120px,calc(100vw-32px))] overflow-hidden">
+      <DialogContent className="h-190 w-280 overflow-hidden">
         <DialogTitle className="sr-only">{agent.name}</DialogTitle>
         <DialogDescription className="sr-only">
           {t(($) => $[`${i18nPrefix}.roster.inlineSetup.description`], { ns: 'workflowAgent' })}

web/app/components/workflow/nodes/human-input-v2/migration/migration-dialog.tsx

@@ -40,7 +40,7 @@ const HumanInputMigrationDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
-      <AlertDialogContent className="w-120 max-w-[calc(100vw-2rem)]">
+      <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
             {t(($) => $['nodes.humanInputMigration.dialog.title'], {

web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx

@@ -106,7 +106,7 @@ const EmailConfigureModal = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[calc(100dvh-64px)] w-180">
+      <DialogContent className="max-h-[calc(100dvh-4rem)] w-180">
         <DialogHeader>
           <DialogTitle>
             {t(($) => $[`${i18nPrefix}.deliveryMethod.emailConfigure.title`], {
@@ -166,7 +166,7 @@ const EmailConfigureModal = ({
             </div>
             <Recipient data={recipients} onChange={setRecipients} />
           </div>
-          <div className="flex items-start justify-between gap-2 rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 pl-2.5 shadow-xs">
+          <div className="flex items-start justify-between gap-2 rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 ps-2.5 shadow-xs">
             <div className="rounded-sm border border-divider-regular bg-components-icon-bg-orange-dark-solid p-0.5">
               <RiBugLine className="size-3.5 text-text-primary-on-surface" />
             </div>

web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx

@@ -38,7 +38,7 @@ export function UpgradeModal({ open, onOpenChange }: UpgradeModalProps) {
         ns: 'workflowHumanInput',
       })}
       classNames={{
-        content: 'max-w-[580px]',
+        content: 'w-145',
       }}
       footer={
         <>
@@ -56,7 +56,7 @@ export function UpgradeModal({ open, onOpenChange }: UpgradeModalProps) {
             >
               <span
                 aria-hidden="true"
-                className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center [background-clip:content-box] [background-origin:content-box] [mask-clip:content-box] [mask-origin:content-box] py-px pl-0.75 text-components-premium-badge-indigo-text-stop-0"
+                className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center [background-clip:content-box] [background-origin:content-box] [mask-clip:content-box] [mask-origin:content-box] py-px ps-0.75 text-components-premium-badge-indigo-text-stop-0"
               />
               <div className="system-sm-medium">
                 <span className="p-1">

web/app/components/workflow/nodes/llm/components/structure-output.tsx

@@ -39,7 +39,7 @@ export function StructureOutput({ className, value, onChange, readOnly }: Props)
       <div className="flex justify-between">
         <div className="flex items-center leading-4.5">
           <div className="code-sm-semibold text-text-secondary">structured_output</div>
-          <div className="ml-2 system-xs-regular text-text-tertiary">object</div>
+          <div className="ms-2 system-xs-regular text-text-tertiary">object</div>
         </div>
         {!readOnly && (
           <DialogTrigger
@@ -72,7 +72,7 @@ export function StructureOutput({ className, value, onChange, readOnly }: Props)
       {!readOnly && (
         <Dialog handle={dialogHandle}>
           <DialogContent
-            className="h-[calc(100dvh-32px)] max-h-200 w-full max-w-240 overflow-hidden"
+            className="h-200 w-240 overflow-hidden"
             finalFocus={hasSchema ? configureButtonRef : undefined}
           >
             <JsonSchemaConfig defaultSchema={value?.schema} onSave={handleChange} />

web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx

@@ -58,19 +58,19 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
 
   return (
     <Dialog open>
-      <DialogContent className="h-[min(640px,calc(100dvh-2rem))] w-230 overflow-hidden">
+      <DialogContent className="h-160 w-230 overflow-hidden">
         <button
           type="button"
           aria-label={t(($) => $['operation.close'], { ns: 'common' })}
-          className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          className="absolute inset-e-4 top-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onHide}
         >
           <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </button>
         <div className="flex size-full">
           {/* LEFT */}
-          <div className="flex h-full w-56 shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
-            <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">
+          <div className="flex h-full w-56 shrink-0 flex-col border-e border-divider-burn bg-background-sidenav-bg">
+            <div className="shrink-0 ps-5 pe-4 pt-5 pb-3 system-xl-semibold text-text-primary">
               {t(($) => $['chatVariable.panelTitle'], { ns: 'workflow' })}
             </div>
             <div className="grow overflow-y-auto px-3 py-2">
@@ -79,7 +79,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
                   key={chatVar.id}
                   type="button"
                   className={cn(
-                    'group mb-0.5 flex w-full cursor-pointer items-center rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+                    'group mb-0.5 flex w-full cursor-pointer items-center rounded-lg border-none bg-transparent p-2 text-start hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
                     currentVar.id === chatVar.id && 'bg-state-base-hover',
                   )}
                   onClick={() => {
@@ -93,7 +93,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
                     className={cn(
                       'i-custom-vender-line-others-bubble-x h-4 w-4',
                       cn(
-                        'mr-1 size-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700',
+                        'me-1 size-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700',
                         currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700',
                       ),
                     )}
@@ -146,7 +146,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
                 {currentVar.value_type !== ChatVarType.Number &&
                   currentVar.value_type !== ChatVarType.String && (
                     <div className="flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2">
-                      <div className="flex h-7 shrink-0 items-center justify-between pt-1 pr-2 pl-3">
+                      <div className="flex h-7 shrink-0 items-center justify-between ps-3 pe-2 pt-1">
                         <div className="system-xs-semibold text-text-secondary">JSON</div>
                         <div className="flex items-center p-1">
                           <IconButton
@@ -169,7 +169,7 @@ const ConversationVariableModal = ({ conversationID, onHide }: Props) => {
                           </IconButton>
                         </div>
                       </div>
-                      <div className="grow pl-4">
+                      <div className="grow ps-4">
                         <CodeEditor
                           readOnly
                           noWrapper

web/app/components/workflow/workflow-generator/index.tsx

@@ -597,13 +597,10 @@ function WorkflowGeneratorModal() {
         }
       }}
     >
-      <DialogContent
-        initialFocus={instructionRef}
-        className="h-[min(680px,calc(100dvh-2rem))] w-285 min-w-0 overflow-hidden"
-      >
+      <DialogContent initialFocus={instructionRef} className="h-170 w-285 overflow-hidden">
         <div className="flex h-full min-h-0 flex-col md:flex-row">
           {/* Left pane: instructions + ideal output + model selector */}
-          <div className="max-h-[55%] w-full shrink-0 overflow-y-auto border-b border-divider-regular p-6 md:h-full md:max-h-none md:w-1/2 md:border-r md:border-b-0 lg:w-142.5">
+          <div className="max-h-[55%] w-full shrink-0 overflow-y-auto border-b border-divider-regular p-6 md:h-full md:max-h-none md:w-1/2 md:border-e md:border-b-0 lg:w-142.5">
             <div className="mb-5">
               <DialogTitle>
                 {isRefine

web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx

@@ -630,7 +630,7 @@ export function AgentKnowledgeRetrievalDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {/* A fixed height keeps the centered dialog still while knowledge is ticked;
           growing would re-center it and slide the list under the pointer. */}
-      <DialogContent initialFocus={filterRef} className="h-[min(40rem,80dvh)] w-xl overflow-hidden">
+      <DialogContent initialFocus={filterRef} className="h-160 max-h-[80dvh] w-xl overflow-hidden">
         <AgentKnowledgeRetrievalForm
           workflowNodeId={workflowNodeId}
           initialBindings={initialBindings}

web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx

@@ -169,9 +169,9 @@ function AgentSkillDetailSectionBlock({ section }: { section: AgentSkillDetailSe
         </p>
       ))}
       {!!section.items?.length && (
-        <ul className="mt-1 flex list-disc flex-col gap-0.5 pl-5 system-xs-regular text-text-secondary">
+        <ul className="mt-1 flex list-disc flex-col gap-0.5 ps-5 system-xs-regular text-text-secondary">
           {section.items.map((item) => (
-            <li key={item} className="pl-0.5">
+            <li key={item} className="ps-0.5">
               {item}
             </li>
           ))}
@@ -413,7 +413,7 @@ function AgentFileTextPreview({ content, fileName }: { content: string; fileName
         <div key={line.key} className="flex min-w-0 items-start">
           <span
             aria-hidden="true"
-            className="w-7 shrink-0 pr-2 text-right text-text-quaternary select-none"
+            className="w-7 shrink-0 pe-2 text-end text-text-quaternary select-none"
           >
             {line.lineNumber}
           </span>
@@ -447,7 +447,7 @@ export function AgentSkillDetailDialog({
   return (
     <DialogContent
       backdropProps={{ forceRender: true, className: 'fixed' }}
-      className="h-[min(720px,calc(100dvh-2rem))] w-[min(960px,calc(100vw-2rem))] overflow-hidden"
+      className="h-180 w-240 overflow-hidden"
     >
       <AgentSkillDetailBody skillName={skillName} detail={detail} />
     </DialogContent>
@@ -474,7 +474,7 @@ export function AgentSkillDetailBody({
       <div className="flex min-h-0 flex-1">
         <div
           className={cn(
-            'flex w-56 min-w-0 shrink-0 border-r-[0.5px] border-divider-subtle bg-background-section',
+            'flex w-56 min-w-0 shrink-0 border-e-[0.5px] border-divider-subtle bg-background-section',
             detail.fileListPanelClassName,
           )}
         >
@@ -552,7 +552,7 @@ export function AgentSkillDetailBody({
               />
             </div>
           </div>
-          <ScrollArea className="min-h-0 flex-1 overflow-hidden rounded-br-2xl">
+          <ScrollArea className="min-h-0 flex-1 overflow-hidden rounded-ee-2xl">
             <ScrollAreaViewport
               aria-labelledby={dialogTitleId}
               className="overscroll-contain"

web/features/agent-v2/agent-detail/configure/components/preview/working-directory-panel.tsx

@@ -232,7 +232,7 @@ export function AgentWorkingDirectoryPanel({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         backdropProps={{ forceRender: true, className: 'fixed' }}
-        className="h-[min(720px,calc(100dvh-2rem))] w-[min(960px,calc(100vw-2rem))] overflow-hidden"
+        className="h-180 w-240 overflow-hidden"
       >
         <AgentWorkingDirectoryContent source={source} open={open} />
       </DialogContent>
@@ -581,7 +581,7 @@ function AgentWorkingDirectoryContent({
                   </Infotip>
                 </div>
                 <TabsIndicator
-                  className="pointer-events-none absolute bottom-0 left-0 h-0 border-b-2 border-components-tab-active transition-[translate,width] duration-150 ease-in-out motion-reduce:transition-none"
+                  className="pointer-events-none absolute inset-s-0 bottom-0 h-0 border-b-2 border-components-tab-active transition-[translate,width] duration-150 ease-in-out motion-reduce:transition-none"
                   style={{
                     translate: 'var(--active-tab-left)',
                     width: 'var(--active-tab-width)',

web/features/new-rag/upload/local-file-preview.tsx

@@ -98,7 +98,7 @@ export function LocalFilePreview({
             }}
           />
         ) : (
-          <DialogContent className="h-[80dvh] max-h-180 w-240 overflow-hidden">
+          <DialogContent className="h-180 max-h-[80dvh] w-240 overflow-hidden">
             <LocalTextFilePreviewBody file={file} />
           </DialogContent>
         ))}

web/features/skills/detail/upload-dialogs.tsx

@@ -172,7 +172,7 @@ export function SkillUploadReviewDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-150 max-w-[calc(100vw-32px)]">
+      <DialogContent className="w-150">
         <DialogHeader>
           <DialogTitle>{t(($) => $['skillManagement.detail.uploadReviewTitle'])}</DialogTitle>
           <DialogDescription>{summary}</DialogDescription>
@@ -238,7 +238,7 @@ export function SkillUploadFailuresDialog({
   const retryableItems = failedItems.filter((item) => item.failureKind !== 'conflict')
   return (
     <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onDismiss()}>
-      <DialogContent className="w-150 max-w-[calc(100vw-32px)]">
+      <DialogContent className="w-150">
         <DialogHeader>
           <DialogTitle>{t(($) => $['skillManagement.detail.uploadFailureTitle'])}</DialogTitle>
           <DialogDescription>