Permanent delete confirmation button overflows

[remihuigen]

Bug Description

In Dutch locale, the "Permanently delete " label overflows in the confirmation dialog. This is probably true for other locales as well, so the root issue seems to be that the button has a fixed width

Expected behavior

Have the button scale with the text content

Technical inputs

v2.25.0

[sonarly]

🟡 Sonarly Analysis — Medium Severity

Confirmation label overflows in narrow delete dialog

The permanent-delete confirmation action uses a non-wrapping button inside a fixed-width modal. Long localized or object-specific labels are clipped or overflow the button, although the destructive action remains usable.

Root Cause

The confirmation label overflows because a dynamically lengthened destructive-action label is rendered in a constrained, non-wrapping button.

DestroyRecordsCommand selects the singular or plural object metadata label and builds the confirmation text as:

const objectLabel = isSingleRecord
  ? objectMetadataItem.labelSingular
  : objectMetadataItem.labelPlural;

const confirmButtonText = `${t`Permanently Destroy`} ${objectLabel}`;

[ref:packages/twenty-front/src/modules/command-menu-item/engine-command/record/components/DestroyRecordsCommand.tsx:65-73]

That text is passed through the headless confirmation flow to ConfirmationModal, where the confirm button is explicitly rendered as fullWidth.

[ref:packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessConfirmationModalEngineCommandEffect.tsx]
[ref:packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx:190-202]

The modal uses narrowWidth, which sets its width to calc(400px - spacing[32]), while the modal itself hides horizontal overflow. The shared Button sets the button width to 100% when fullWidth is enabled and applies white-space: nowrap; ButtonText also applies white-space: nowrap.

[ref:packages/twenty-ui/src/layout/modal/components/Modal.tsx:51-63]
[ref:packages/twenty-ui/src/input/button/components/Button/Button.tsx:364-379]
[ref:packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx:42-49]

The enabling code defect predates the report: the shared command was introduced in commit f688db30a96, where the previous generic labels (“Permanently Destroy Record” and “Destroy Records”) were replaced with labels containing objectLabel. Git blame assigns the affected dynamic-label lines to that commit, and git show confirms it added the affected file.

[ref:git-blame:DestroyRecordsCommand.tsx:65-73]
[ref:git-show:f688db30a96]

The triggering condition occurred when a user opened this confirmation for a record whose localized/object-specific label was wider than the narrow modal could accommodate. The issue provides the concrete trigger: Dutch locale on v2.25.0. The v2.25.0 bump itself did not modify frontend UI files; it changed package versions and server upgrade-version constants only.

[ref:GitHub issue #23501]
[ref:git-show:6623901eb4]

No exception or backend failure is involved. This is a client-side layout defect exposed by the combination of the dynamic object label and the existing fixed-width/non-wrapping confirmation-button styling.

Blame commit: f688db30 by bosiraphael — Command to deduplicate command menu items (#19202)

Suggested Fix

Updated ConfirmationModal button styling so long localized confirmation labels can wrap within the modal instead of being clipped by the shared Button's non-wrapping defaults. The button now grows vertically as needed, its nested text containers can shrink, and long unbroken labels can break safely. Removed the unused StyledConfirmationButton implementation while preserving the existing accent behavior for all confirmation buttons.

---

Analyzed by Sonarly · View full analysis

[wajrock]

Hi, I'd like to work on this issue, is it still available ?