[lyzno1]

Summary

AlertDialog had a padded footer part but no header part, and its title and description carried no styles. So about 60 call sites restated the same header wrapper (flex flex-col gap-2 px-6 pt-6 pb-4) and the same title and description typography. The rest wrote close variants. Some sites padded the whole surface with p-6 and then undid the footer's padding with p-0 pt-6.

AlertDialogHeader now owns the header layout. AlertDialogTitle and AlertDialogDescription own their typography, and the action buttons own their minimum width. All of these follow the Dify Design Kit "Confirm" component:

• Header: flex flex-col gap-2 px-6 pt-6 pb-4. AlertDialogFooter keeps its p-6 contract.
• Title: title-2xl-semi-bold wrap-break-word text-text-primary. The title wraps and never truncates, as in the design. It often names the object being acted on, and a cut-off name hides what the user is confirming. The dialog grows vertically, so wrapping costs nothing for titles that fit on one line.
• Description: system-md-regular wrap-break-word whitespace-pre-wrap text-text-secondary. pre-wrap keeps newlines in translated strings. text-secondary follows the design.
• Cancel and confirm buttons: min-w-20, the 80px minimum from the design's action buttons.

The defaults are real class defaults on the parts, not a selector scoped to the header. dify-ui's cn cannot merge Dify's custom typography utilities, so call sites no longer pass their own title or description typography or color, and no title truncates. Every dialog follows the component's styles.

Call-site changes

• Every header wrapper is now AlertDialogHeader with no class overrides. Classes and props equal to a default are removed: ! modifiers that cn resolves, dead text-left, align-middle, w-120, rounded-2xl! and p-0 on the content, variant="secondary" on cancel buttons, and tone="destructive" on confirm buttons.
• Dialogs that padded the content and overrode the footer to p-0 pt-6 are restructured onto Header + Footer: skill file/version delete, skill restore, skill save conflict, agent delete, token delete, and the two pipeline DSL dialogs.
• The model-provider credential confirm drops an empty AlertDialogDescription, so the dialog is no longer described by an empty element.
• The plugin removal and endpoint delete/disable confirms used a hand-styled div as their description. They now use AlertDialogDescription, so their text is announced as the dialog description and matches the other descriptions.
• The copy-members confirm used plain Buttons in its footer. Both actions now use AlertDialogConfirmButton (tone="default", Skip as variant="secondary").
• The type-the-name confirms (app delete in the list and the sidebar, skill delete in the list and the detail page, subscription delete) share one structure:
  • Content holds a <form> whose confirm button is type="submit". The two skill deletes previously wired the input to a click-only button.
  • The Field follows the description inside the header, spaced only by the header gap.
  • Field, FieldLabel and InputGroup use their defaults, and the fill action is a default Button variant="tertiary" size="small".

Sites whose look changes

• Every description that used text-text-tertiary (the former majority) now renders in text-text-secondary, as in the design.
• Title typography converges on the default: snippet delete in the sidebar and the snippet list, and agent clear-session (title-md-semi-bold); the high-quality indexing switch (text-lg/7); the model-provider credential confirm (system-xl-semibold).
• Description typography converges on the default (system-sm-regular before): snippet delete ×2, agent clear-session, created API key, access-token delete, app export with secrets.
• Action buttons narrower than 80px (most short labels) widen to 80px.
• Titles that truncated now wrap when they exceed one line, which happens with long names or long translations: the variable, member, role, access-rule, tag, subscription, external API, API-extension, agent and skill delete confirms; payment results; pipeline template delete; tracing removal; workflow export warning; prompt overwrite; workflow generator. The title tooltip attribute that accompanied truncation is removed from the annotation, external API, pipeline publish and conversion, effect variable and tag confirms.
• Header spacing converges on the default (8px title-to-description, 16px under the header):
  • Description to actions goes from 24px to 40px: skill file delete, version delete, restore and save conflict; agent delete; token delete; snippet delete ×2; agent clear-session.
  • Title to description goes from 4px to 8px: created API key, agent clear-session. It goes from 16px to 8px on skill delete in the list and in the sidebar.
  • The model-provider credential confirm goes from 28px to 40px under the title.
  • The secrets table in the two export dialogs sits 16px under the header instead of 24px.
• Type-the-name confirms: the field sits 8px under the description (16px or 24px before) with the default label-to-input gap. The label uses the default system-sm-medium, and the fill button is the default small tertiary button instead of a custom pill.
• The plugin and endpoint descriptions render in text-secondary, and the copy-members buttons get the 80px minimum width.
• Content uses the default surface everywhere:
  • The DSL version mismatch dialogs (app import, pipeline import, pipeline version mismatch, snippet import) and the version history delete and restore confirms regain the 0.5px panel border and shadow-lg instead of border-none shadow-xl.
  • Snippet delete ×2, agent clear-session (w-100) and the indexing switch (w-108) are 480px wide.
  • max-w-none and max-w-120 are dropped, so those dialogs no longer overflow viewports narrower than 512px.
• Descriptions that did not wrap long unbroken words now wrap them inside the dialog instead of overflowing it.

Not migrated here

These dialogs are not decisions, so they belong on Dialog rather than AlertDialog. They keep their current layout until Dialog has its own header, body and footer parts:

• the created API key dialog, which shows the new key once;
• the payment result notice in use-pay;
• the progress and completed states of segment regeneration. Only its first step is a confirmation.

Screenshots

Header and footer spacing is unchanged across all migrated dialogs. Visual changes are limited to the list above.

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've verified the change and added or updated tests where meaningful regression risk justifies coverage.
• I've updated the documentation accordingly.
• I ran make lint && make type-check (backend) and vp staged (frontend) to appease the lint gods

From Claude Code

[codecov]

Codecov Report

❌ Patch coverage is 90.32258% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 86.40%. Comparing base (e1f733f) to head (9a54ef0).

Files with missing lines	Patch %	Lines
packages/dify-ui/src/alert-dialog/index.tsx	66.66%	4 Missing ⚠️
web/features/skills/detail/sidebar-actions.tsx	92.85%	1 Missing ⚠️
web/features/skills/page.tsx	92.85%	1 Missing ⚠️

❌ Your project check has failed because the head coverage (86.40%) is below the adjusted base coverage (88.12%). You can increase the head coverage or adjust the Removed Code Behavior.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #44223      +/-   ##
==========================================
- Coverage   89.12%   86.40%   -2.72%     
==========================================
  Files        5310     5058     -252     
  Lines      327307   316803   -10504     
  Branches    64376    60943    -3433     
==========================================
- Hits       291720   273748   -17972     
- Misses      30392    37860    +7468     
  Partials     5195     5195              

Flag	Coverage Δ
dify-ui	92.12% <66.66%> (-0.13%)	⬇️
web	82.59% <96.00%> (-7.11%)	⬇️

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.