Skip to main content

Dialog title reserves right spacing for close button

Version: 0.4.3 ยท Type: ๐Ÿ› Bug Fix

Problemโ€‹

When showClose is true (the default), long DialogTitle text could be obscured by the close button. The close button is absolutely positioned in the top-right corner (right/top = --Spacing_24, roughly 28 px wide), but the title had no corresponding right padding, causing overlap on narrow dialogs or with verbose titles.

Changed Filesโ€‹

  • packages/design/src/components/Dialog/Dialog.tsx

Changesโ€‹

DialogTitle now conditionally receives pr-(--Spacing_40) when the close button is visible:

  • showClose defaults to true; undefined is treated as true (matching DialogContent's own default).
  • When showClose={false}, no padding is added.
const effectiveShowClose = (showClose ?? contentPropsShowClose) ?? true;
// ...
<DialogTitle className={effectiveShowClose ? 'pr-(--Spacing_40)' : undefined}>
  {title}
</DialogTitle>