refactor(dify-ui): scroll dialog bodies and give AlertDialog a body

lint.config.ts

@@ -31,39 +31,17 @@ export const stylingContractRules = {
         },
         {
           pattern: '^(Dialog|AlertDialog)Content$',
-          // A fixed-height surface may stop scrolling itself (`overflow-hidden`) and hand its
-          // remaining height to content that scrolls (`flex flex-col`).
-          allow: [
-            'w-*',
-            'min-w-*',
-            'max-w-*',
-            'h-*',
-            'min-h-*',
-            'max-h-*',
-            'flex',
-            'flex-col',
-            'overflow-hidden',
-          ],
-          deny: [
-            'flex-1',
-            'flex-auto',
-            'flex-initial',
-            'flex-none',
-            'flex-row',
-            'flex-row-reverse',
-            'flex-col-reverse',
-            'flex-wrap',
-            'flex-nowrap',
-          ],
+          allow: ['w-*', 'min-w-*', 'max-w-*', 'h-*', 'min-h-*', 'max-h-*', 'overflow-hidden'],
+          deny: ['max-w-none', 'max-h-none', '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 only size it. Compose DialogPortal, DialogBackdrop and DialogPopup for a custom surface.',
+            '"{{className}}" is outside the {{component}} styling contract. The surface owns position, chrome and scrolling, and its parts own spacing; callers may only size it within the viewport. Compose DialogPortal, DialogBackdrop and DialogPopup for a custom surface.',
         },
         {
           pattern: '^DialogPopup$',
           allow: ['*'],
           deny: ['top-1/2', 'left-1/2', '-translate-x-1/2', '-translate-y-1/2'],
           message:
-            '"{{className}}" recreates the DialogContent centering. Use DialogContent for a centered dialog; DialogPopup is for a surface that places itself.',
+            '"{{className}}" recreates the DialogContent centering. Use DialogContent for a centered dialog; DialogPopup is the bare dialog element for a surface that places and dresses itself.',
         },
         {
           pattern: '^(Dialog|AlertDialog)(Title|Description)$',
@@ -84,10 +62,11 @@ export const stylingContractRules = {
             '"{{className}}" is outside the DialogFooter styling contract. The footer owns its spacing and alignment; callers may stack full-width actions.',
         },
         {
-          pattern: '^DialogBody$',
+          pattern: '^(Dialog|AlertDialog)Body$',
           allow: ['layout', 'gap-*', 'space-x-*', 'space-y-*'],
+          deny: ['flex-1', 'flex-auto', 'flex-initial', 'flex-none', 'overflow-*'],
           message:
-            '"{{className}}" is outside the DialogBody styling contract. The body owns the content gutter; callers may lay out its content.',
+            '"{{className}}" is outside the {{component}} styling contract. The body owns the content gutter and scrolls between the header and footer; callers may lay out its content.',
         },
       ],
     },

oxlint-suppressions.json

@@ -55,11 +55,6 @@
       "count": 2
     }
   },
-  "web/app/account/(commonLayout)/delete-account/index.tsx": {
-    "shadcn/no-restyle": {
-      "count": 3
-    }
-  },
   "web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -1627,11 +1622,6 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx": {
-    "shadcn/no-restyle": {
-      "count": 2
-    }
-  },
   "web/app/components/plugins/marketplace/home/home-trending.tsx": {
     "jsx-a11y/no-static-element-interactions": {
       "count": 1

packages/dify-ui/docs/overlays.md

@@ -61,10 +61,15 @@ clipped, `display: none` or unmounted, and the shared positioner class turns tha
 
 ## Primitive semantics
 
-- Use `Dialog` for modal content that needs focus containment and scroll locking.
+- Use `Dialog` for modal content that needs focus containment and scroll locking. `DialogContent`
+  is the centered modal surface: compose `DialogHeader`, `DialogBody` and `DialogFooter` in it, and
+  `DialogBody` scrolls between the other two. A wrapper between the surface and its parts, such as
+  a form, keeps the flex chain with `contents`. `DialogPopup` is the bare dialog element for a
+  surface that places and dresses itself.
 - Use `AlertDialog` only for a destructive or must-confirm decision requiring an explicit answer.
   It blocks outside-press dismissal but still closes on Escape; cancel that close in
-  `onOpenChange` when the answer must be explicit.
+  `onOpenChange` when the answer must be explicit. `AlertDialogHeader` holds the title and
+  description; anything the user fills in or reviews before answering goes in `AlertDialogBody`.
 - Use `Drawer` for side-panel interactions that follow the drawer model.
 - Use `DropdownMenu` for button-triggered action lists and `ContextMenu` for context actions.
   A long action list filters with `DropdownMenuFilterProvider`; choosing a value is