fix(react-dialog): DialogSurface height respects custom maxHeight styles (#34881)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>
Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>

Author: 3 people

change/@fluentui-react-dialog-60b61b15-50b3-4773-ac9a-8b4df48c83ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: DialogSurface and DialogBody height respects custom maxHeight styles by replacing @supports rules with Griffel fallback arrays",
+  "packageName": "@fluentui/react-dialog",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts

@@ -14,15 +14,11 @@ const useResetStyles = makeResetStyles({
   overflow: 'unset',
   gap: DIALOG_GAP,
   display: 'grid',
-  maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,
+  maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],
   boxSizing: 'border-box',
   gridTemplateRows: 'auto 1fr',
   gridTemplateColumns: '1fr 1fr auto',
 
-  '@supports (height: 1dvh)': {
-    maxHeight: `calc(100dvh - 2 * ${SURFACE_PADDING})`,
-  },
-
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
     gridTemplateRows: 'auto 1fr auto',

packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

@@ -35,18 +35,14 @@ const useRootBaseStyle = makeResetStyles({
   position: 'fixed',
   height: 'fit-content',
   maxWidth: '600px',
-  maxHeight: '100vh',
+  maxHeight: ['100vh', '100dvh'],
   boxSizing: 'border-box',
   backgroundColor: tokens.colorNeutralBackground1,
   color: tokens.colorNeutralForeground1,
   // Same styles as DialogSurfaceMotion last keyframe,
   // to ensure dialog will be properly styled when surfaceMotion is opted-out
   boxShadow: tokens.shadow64,
 
-  '@supports (height: 1dvh)': {
-    maxHeight: '100dvh',
-  },
-
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
   },