Summary
Provide a first-class full-width / flush ModalFooter in Studio UI so consumers can render a footer that sits flush to the modal's bottom and side edges (like an embedded toolbar), without re-implementing negative-margin workarounds against antd internals.
Motivation
The backend-power-tools-bundle "Compare & merge" wizard embeds the object-merger, whose merge step has no modal footer — the merger's own Toolbar (position bottom) takes its place, spanning the modal edge-to-edge. The wizard's other steps (Assignments, Published-duplicate) need a real modal footer that looks identical to that toolbar: a full-width bar, flush to the modal's bottom and side edges, with a hairline top border.
The current ModalFooter (inside antd's .ant-modal-footer) can't do that out of the box — it's inset on all sides by antd's modal-content padding + the footer's own padding/margin. So the consumer had to fight the internals:
// modal className
.ant-modal-content { padding-bottom: 0; } // drop content bottom padding
.ant-modal-footer { margin: 0; padding: 0; } // drop footer padding/margin
// footer bar
margin-inline: -{paddingContentHorizontalLG}; // bleed to the side edges
padding: {paddingXS};
border-top: 1px solid {colorBorderTertiary};
background: {colorBgContainer};
This is fragile (breaks if antd changes its modal padding tokens/structure), and every consumer that wants a flush footer re-derives it.
Proposal
Add a flush option to ModalFooter (or a dedicated component) — e.g. variant="flush" / bleed / fullWidth — that:
- spans the full modal width, flush to the bottom and side edges (no content/footer padding inset),
- optionally renders a hairline top border (
colorBorderTertiary),
- ideally shares styling with the studio
Toolbar (position="bottom") so an embedded toolbar and a modal footer look identical,
- keeps the normal padded footer as the default.
That would let consumers drop the .ant-modal-content / .ant-modal-footer overrides and the margin-inline bleed entirely.
Reference
Happy to PR the component/option if the API shape is agreed.
Summary
Provide a first-class full-width / flush
ModalFooterin Studio UI so consumers can render a footer that sits flush to the modal's bottom and side edges (like an embedded toolbar), without re-implementing negative-margin workarounds against antd internals.Motivation
The
backend-power-tools-bundle"Compare & merge" wizard embeds the object-merger, whose merge step has no modal footer — the merger's ownToolbar(positionbottom) takes its place, spanning the modal edge-to-edge. The wizard's other steps (Assignments, Published-duplicate) need a real modal footer that looks identical to that toolbar: a full-width bar, flush to the modal's bottom and side edges, with a hairline top border.The current
ModalFooter(inside antd's.ant-modal-footer) can't do that out of the box — it's inset on all sides by antd's modal-content padding + the footer's own padding/margin. So the consumer had to fight the internals:This is fragile (breaks if antd changes its modal padding tokens/structure), and every consumer that wants a flush footer re-derives it.
Proposal
Add a flush option to
ModalFooter(or a dedicated component) — e.g.variant="flush"/bleed/fullWidth— that:colorBorderTertiary),Toolbar(position="bottom") so an embedded toolbar and a modal footer look identical,That would let consumers drop the
.ant-modal-content/.ant-modal-footeroverrides and themargin-inlinebleed entirely.Reference
backend-power-tools-bundlebranchcompare-merge-wizard—compare-merge-modal.styles.ts(modalFlush,footer) andcompare-merge-footer.tsx.executeElementTaskonFinish issue); this is purely about a flush footer primitive.Happy to PR the component/option if the API shape is agreed.