[lyzno1]

Summary

Follow-up to #44221. The branch also carries fix(web): align app operation dialog ownership and sessions, committed separately. The dialog parts keep the Design Kit spacing, but the surface changes how it scrolls, DialogPopup becomes a bare element, AlertDialog gets a body part, and the lint contract tightens around what call sites may do.

Scroll model: the body scrolls, not the surface

DialogContent was the scroll container, so DialogHeader and DialogFooter were sticky with an opaque background and a z-index to stay above body content, EncryptedFooter in web added a second sticky layer, and DialogCloseButton only stayed put because the sticky header happened to be its positioned ancestor. The scrollbar ran through the header and footer, and six call sites already hand-rolled an inside-scroll layout with flex flex-col overflow-hidden plus a ScrollArea.

Now DialogContent and AlertDialogContent are a flex column, DialogBody is the scroll region (relative min-h-0 flex-1 overflow-y-auto), and the header and footer are plain shrink-0 rows: no sticky, no background, no z-index. The surface keeps overflow-y-auto as a fallback, so a custom surface that puts content outside DialogBody still scrolls as before. DialogBody is relative because Base UI's hidden form inputs (Switch, Select) are absolutely positioned; without a positioned body they escape its clip and add scrollable overflow to the surface. It clips horizontally (overflow-x-hidden): the body scrolls vertically only, and wide content such as a code editor must fit the gutter.

The cap moves from max-h-[80dvh] to max-h-[calc(100dvh-2rem)], the same viewport inset the width already used and the value AlertDialogContent had; twelve call sites restated it and no longer do.

A wrapper between the surface and its parts breaks the flex chain, so a <form> or <Form> around DialogBody and DialogFooter gets className="contents".

DialogPopup is bare

Of the eleven DialogPopup sites, six stripped its radius, border, background and shadow (full-screen shells, media previews) and the other five overrode the radius. The chrome now lives only on DialogContent; DialogPopup carries relative and the open/close animation. Side panels and mobile sheets state their surface classes, full-screen shells and previews drop their ! overrides.

Nested dialogs step back

Base UI sets --nested-dialogs and data-nested-dialog-open on a surface while a dialog opens on top of it, and skips the nested backdrop by default. DialogContent and AlertDialogContent now scale back by 5% per level and dim through an after overlay while nested, so a confirm opened from a dialog reads as a layer rather than a second dialog of the same size. Sites that pass backdropProps={{ forceRender: true }} keep their backdrop; whether those 49 sites still need it is a follow-up.

AlertDialog gets a body

Seven type-to-confirm dialogs put their Field inside AlertDialogHeader, two export confirms hand-wrote a px-6 block, and three error paragraphs sat between header and footer, because AlertDialog had no body part. AlertDialogBody is the gutter only (px-6) and does not scroll: the Design Kit Confirm component has no body section, so the header's pb-4 and the footer's p-6 give the vertical rhythm (16px from the description to the field, 24px from the field to the actions), and a confirm that outgrows the viewport scrolls as a whole. A scrolling body with no vertical padding would clip the focus ring of the field at its edge.

AlertDialogFooter drops the dead self-stretch and aligns items-center like DialogFooter. AlertDialogContent shares the surface constant with DialogContent (shadow-xl; it was shadow-lg) and the title constant, in internal/overlay.ts, instead of "change both together" comments.

Confirm tone

AlertDialogConfirmButton defaults to the destructive tone, which carried over from the legacy Confirm component's type="warning" default. Non-destructive confirmations render in the default tone now: publish pipeline, update MCP tools, the four DSL version-mismatch "import anyway" dialogs, and the skill version restore (the workflow and agent restores already used it). Reset-to-saved-config and overwrite-generated-prompt discard work and stay destructive. The component default is unchanged.

Other call-site changes

• DialogHeader reserves the close-button gutter only when a DialogCloseButton is inside it; headers without one no longer leave 32px empty on the end side.
• max-w-none and max-h-none are denied on the surface: they disabled the viewport guard. w-full max-w-X becomes w-X.
• Footer buttons in stacked footers drop w-full!; items-stretch already stretches them. w-23.75! becomes min-w-24.
• member-details-modal had two sibling bodies around a divider; it is one body with the divider inside, so only one region scrolls. The app DSL import dialog renders its tab panels as DialogBody, like the dataset one.
• EncryptedFooter is removed; EncryptedBottom renders after DialogFooter as a plain column child.
• The delete-account dialog composes the parts instead of p-6 and a padded title; member-details-modal drops overflow-visible (its only popover is portaled); schema-dialog uses DialogBody for its hand-rolled scroll region; install-from-marketplace drops its layout overrides but keeps its own header so initial focus stays on Cancel.
• Stale shadcn/no-restyle suppressions pruned for delete-account and install-from-marketplace.

Lint contract

• DialogContent / AlertDialogContent: sizing only (w-*, min-w-*, max-w-*, h-*, min-h-*, max-h-*, overflow-hidden); max-w-none, max-h-none, w-screen, h-screen denied.
• DialogBody / AlertDialogBody: layout and gap; flex-1, overflow-* denied.
• DialogPopup: anything except the centering classes.

Stories and docs

The Dialog and AlertDialog stories are rebuilt around the parts (see the story list in the stories commit). docs/overlays.md states the surface, body and popup contract.

Left for follow-ups

• params-config, from-market-place (downgrade branch), readme-panel title and regeneration-modal keep their suppressions: their content has an internal header that does not map onto the parts.
• hitl-input-block/input-field.tsx renders its own panel chrome inside the dialog surface (double chrome), untouched here.
• Pure form dialogs still keep field state in React; Base UI Form and Field can own it (uncontrolled), to review separately.

[codecov]

Codecov Report

❌ Patch coverage is 91.04478% with 48 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.25%. Comparing base (17cff2d) to head (89cfd8f).

Files with missing lines	Patch %	Lines
web/app/components/app-sidebar/app-info/index.tsx	50.00%	16 Missing ⚠️
...nents/app-sidebar/app-info/app-metadata-dialog.tsx	85.84%	15 Missing ⚠️
...ponents/app-sidebar/app-info/export-app-dialog.tsx	92.59%	4 Missing ⚠️
packages/dify-ui/src/alert-dialog/index.tsx	25.00%	3 Missing ⚠️
...eb/app/components/app-sidebar/app-info/metadata.ts	50.00%	2 Missing ⚠️
web/app/components/app/overview/settings/index.tsx	97.05%	2 Missing ⚠️
...-setting/model-provider-page/model-modal/index.tsx	88.88%	2 Missing ⚠️
packages/dify-ui/src/dialog/index.tsx	66.66%	1 Missing ⚠️
...pp/account/(commonLayout)/delete-account/index.tsx	0.00%	1 Missing ⚠️
...ts/plugins/plugin-auth/authorize/api-key-modal.tsx	83.33%	1 Missing ⚠️
... and 1 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #44248      +/-   ##
==========================================
- Coverage   89.25%   89.25%   -0.01%     
==========================================
  Files        5325     5328       +3     
  Lines      327478   327594     +116     
  Branches    64418    64476      +58     
==========================================
+ Hits       292289   292378      +89     
- Misses      29994    30021      +27     
  Partials     5195     5195              

Flag	Coverage Δ
cli	90.56% <ø> (ø)
dify-ui	91.67% <60.00%> (-0.09%)	⬇️
web	90.01% <91.63%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Vinext bundle analysis

JS gzip: 🟢 −2.31 KiB (−0.02%) · CSS gzip: 🟠 +79 B (+0.02%)

All client output	Base gzip → Merge gzip	Gzip change
JS	9921.20 KiB → 9918.89 KiB	🟢 −2.31 KiB (−0.02%)
CSS	331.97 KiB → 332.05 KiB	🟠 +79 B (+0.02%)

Entry changes: 🟠 103 increased · 🟢 70 decreased (gzip).

Largest entry changes

Top 5 by absolute gzip delta. Static dependencies overlap; do not sum entries.

Source entry	Base gzip → Merge gzip	Gzip change
app/components/app-sidebar/app-detail-sidebar.tsx	477.55 KiB → 672.70 KiB	🟠 +195.14 KiB (+40.86%)
app/components/workflow/collaboration/core/crdt-runtime.ts	228.82 KiB → 241.84 KiB	🟠 +13.01 KiB (+5.69%)
app/components/workflow/nodes/agent-v2/panel.tsx	1644.77 KiB → 1643.89 KiB	🟢 −898 B (−0.05%)
app/components/integrations/modal.tsx	1262.49 KiB → 1261.64 KiB	🟢 −863 B (−0.07%)
app/components/explore/try-app/index.tsx	1330.60 KiB → 1329.76 KiB	🟢 −857 B (−0.06%)

Top 20 of 173 changed entries (full paths and raw sizes)

Source entry	Base gzip → Merge gzip	Gzip change	Raw change
dynamic-entry: app/components/app-sidebar/app-detail-sidebar.tsx	477.55 KiB → 672.70 KiB	🟠 +195.14 KiB (+40.86%)	🟠 +641.12 KiB (+42.43%)
dynamic-entry: app/components/workflow/collaboration/core/crdt-runtime.ts	228.82 KiB → 241.84 KiB	🟠 +13.01 KiB (+5.69%)	🟠 +46.24 KiB (+5.21%)
dynamic-entry: app/components/workflow/nodes/agent-v2/panel.tsx	1644.77 KiB → 1643.89 KiB	🟢 −898 B (−0.05%)	🟢 −980 B (−0.02%)
dynamic-entry: app/components/integrations/modal.tsx	1262.49 KiB → 1261.64 KiB	🟢 −863 B (−0.07%)	🟢 −647 B (−0.02%)
dynamic-entry: app/components/explore/try-app/index.tsx	1330.60 KiB → 1329.76 KiB	🟢 −857 B (−0.06%)	🟢 −563 B (−0.01%)
dynamic-entry: app/components/workflow/nodes/agent/panel.tsx	1503.22 KiB → 1502.38 KiB	🟢 −856 B (−0.06%)	🟢 −911 B (−0.02%)
dynamic-entry: app/components/app/configuration/index.tsx	1376.73 KiB → 1375.89 KiB	🟢 −854 B (−0.06%)	🟢 −519 B (−0.01%)
dynamic-entry: app/components/workflow-app/index.tsx	1456.49 KiB → 1455.68 KiB	🟢 −832 B (−0.06%)	🟢 −1.04 KiB (−0.02%)
dynamic-entry: app/components/integrations/index.tsx	1261.25 KiB → 1260.44 KiB	🟢 −828 B (−0.06%)	🟢 −569 B (−0.01%)
dynamic-entry: app/components/workflow/nodes/trigger-plugin/panel.tsx	1449.79 KiB → 1448.99 KiB	🟢 −823 B (−0.06%)	🟢 −855 B (−0.02%)
dynamic-entry: app/components/workflow/nodes/tool/panel.tsx	1451.47 KiB → 1450.67 KiB	🟢 −822 B (−0.06%)	🟢 −855 B (−0.02%)
dynamic-entry: app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx	1406.39 KiB → 1405.59 KiB	🟢 −820 B (−0.06%)	🟢 −879 B (−0.02%)
dynamic-entry: app/components/explore/try-app/preview/agent-app-preview.tsx	1222.03 KiB → 1221.24 KiB	🟢 −804 B (−0.06%)	🟢 −481 B (−0.01%)
dynamic-entry: app/components/workflow/nodes/start/panel.tsx	1362.70 KiB → 1361.92 KiB	🟢 −799 B (−0.06%)	🟢 −777 B (−0.02%)
dynamic-entry: app/components/snippets/index.tsx	1368.54 KiB → 1367.76 KiB	🟢 −795 B (−0.06%)	🟢 −847 B (−0.02%)
dynamic-entry: app/components/workflow/features.tsx	1373.56 KiB → 1372.78 KiB	🟢 −793 B (−0.06%)	🟢 −755 B (−0.02%)
dynamic-entry: app/components/workflow/nodes/http/panel.tsx	1366.03 KiB → 1365.26 KiB	🟢 −785 B (−0.06%)	🟢 −710 B (−0.02%)
dynamic-entry: app/components/workflow/panel/record.tsx	1355.22 KiB → 1354.46 KiB	🟢 −779 B (−0.06%)	🟢 −742 B (−0.02%)
dynamic-entry: app/components/workflow/panel/chat-variable-panel/index.tsx	1359.71 KiB → 1358.95 KiB	🟢 −778 B (−0.06%)	🟢 −743 B (−0.02%)
dynamic-entry: app/components/workflow/panel/debug-and-preview/index.tsx	1408.77 KiB → 1408.01 KiB	🟢 −778 B (−0.05%)	🟢 −732 B (−0.02%)

🆕 / ➖ 3 added or removed entries

Showing 3 of 3. Entry-boundary changes are not size deltas from zero.

Source entry	Change	Static dependencies (gzip)
dynamic-entry: app/components/app/export-confirm-modal.tsx	🆕 New entry	120.75 KiB
dynamic-entry: app/components/app/switch-app-modal/index.tsx	➖ Removed entry	437.45 KiB
dynamic-entry: app/components/workflow/update-dsl-modal.tsx	➖ Removed entry	439.88 KiB

📦 0 package attribution changes (uncompressed modules)

Showing 0 of 0, ordered by absolute module-size delta.

Package	Base	Merge	Δ
No package attribution changes	—	—	—

Measurement details and build revisions

Base: 17cff2d80a4b31870c3c4af6375cc3ed44144a7a · Merge: 4b49d357b6c12fbdaed2f6d45cb1b23458db34b2
Vinext: 1.1.0 → 1.1.0; Rolldown: 1.2.12 → 1.2.12

Raw JS change: 🟢 −4.07 KiB (−0.01%) · Raw CSS change: 🟠 +52 B (+<0.01%)

🟠 Increase · 🟢 Decrease · ⚪ Unchanged. Colors indicate direction, not a performance budget verdict. Percentages use the base size.

Entries follow only static edges in the official Rolldown chunk graph, deduplicating shared files. Dynamic entries are measured when loaded; they are not page first-load metrics. Entry totals overlap and must not be summed.
Package attribution sums module sizes reported by Rolldown, not compressed emitted bytes. Gzip totals are measured per emitted file. This is Vinext output, not Next.js/Turbopack output.
Report only: increases do not fail this check. Missing or incompatible analysis data does.

Download base/merge snapshots and official Rolldown analysis reports.

Comparison: event base SHA vs the tested merge commit at GITHUB_SHA (PR or merge queue).