fix(react-dialog): DialogContent scrollbar always visible

[bsunderhus]

Previous Behavior

PR #27248 introduced a regression where the scrollbar would always be visible due to a negative margin.

New Behavior

1. removes declaration of the height: 100% from DialogContent, which makes height auto, which will properly vary DialogContent height taking into account the negative margin in cases where the scrollbar should be visible or not
2. removes unnecessary height and width styles from DialogContent, DialogBody and DialogSurface

Related Issue(s)

• Fixes [Bug]: DialogContent scrollbar always visible. #27347

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bded5d0:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: a36754d76ad5afb444c9f6975266bd32ba2e7b1d (build)

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-dialog Dialog (including children components)	93.616 kB 27.452 kB	93.388 kB 27.408 kB	-228 B -44 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	67.994 kB 18.395 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	207.4 kB 57.516 kB
react-components react-components: FluentProvider & webLightTheme	38.819 kB 12.351 kB
react-portal-compat PortalCompatProvider	6.446 kB 2.185 kB

_{🤖 This report was generated against a36754d76ad5afb444c9f6975266bd32ba2e7b1d}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	920	891	5000
Button	mount	596	588	5000
Field	mount	1552	1541	5000
FluentProvider	mount	1112	1077	5000
FluentProviderWithTheme	mount	288	290	10
FluentProviderWithTheme	virtual-rerender	283	287	10
FluentProviderWithTheme	virtual-rerender-with-unmount	283	288	10
InfoButton	mount	204	213	5000
MakeStyles	mount	1386	1376	50000
Persona	mount	2150	2060	5000
SpinButton	mount	1862	1834	5000

[lekoaf]

This seems to work. Did some quick testing on the Codesandbox.

I'm gonna have to do some changes to my code though because I add padding-top and padding-bottom to the <DialogContent/> which makes the scrollbars appear again. I felt that the dialog didn't have enough padding when you only use it for a small piece of text.

const useDialogStyles = makeStyles({
  sections: {
    display: 'flex',
    flexDirection: 'column',
    rowGap: tokens.spacingVerticalL,
    paddingTop: tokens.spacingVerticalS,
    paddingBottom: tokens.spacingVerticalXXXL,
  },
  title: {
    overflowWrap: 'break-word',
  },
})

function MyCustomDialog({
  open = true,
  onClose,
  title,
  children,
}) {
  const dialogStyles = useDialogStyles()

  return (
    <Dialog
      open={open}
      onOpenChange={(_event, data) => !data.open && onClose?.()}
    >
      <DialogSurface>
        <DialogBody>
          <DialogTitle className={dialogStyles.title}>{title}</DialogTitle>
          <DialogContent className={dialogStyles.sections}>{children}</DialogContent>
          <DialogActions>
            <DialogTrigger disableButtonEnhancement><Button /></DialogTrigger>
            <Button />
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  )
}