remove overflow and inline transform from Dialog

.changeset/little-clocks-invite.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': patch
+'@itwin/itwinui-css': patch
+---
+
+Fixed blurring and resizing issues in Dialog/Modal by removing `overflow: hidden` and inline `transform` styles.

packages/itwinui-css/src/dialog/dialog.scss

@@ -38,15 +38,6 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
     border: 1px solid;
   }
 
-  // needed to prevent resizable dialog content from escaping when dialog is
-  // too small. also fixes rounded corners in title bar. see PR #1424
-  overflow: hidden;
-
-  &:where(:has(.iui-dialog-content), [data-iui-flex='true']) {
-    display: flex;
-    flex-direction: column;
-  }
-
   &:not(.iui-dialog-visible) {
     visibility: hidden;
     opacity: 0;
@@ -172,6 +163,8 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
   cursor: grab;
   background-color: var(--iui-color-background-backdrop);
   border-block-end: 1px solid var(--iui-color-border);
+  border-start-start-radius: var(--iui-border-radius-1);
+  border-start-end-radius: var(--iui-border-radius-1);
 
   &:active {
     cursor: grabbing;

packages/itwinui-react/src/core/Dialog/DialogContent.tsx

@@ -2,10 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -14,29 +11,6 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  *   My dialog content
  * </Dialog.Content>
  */
-export const DialogContent = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const contentRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    // firefox hack for adding data-iui-flex in absence of :has
-    if (!supportsHas()) {
-      const dialog = contentRef.current?.closest('[role=dialog]');
-      if (dialog instanceof HTMLElement) {
-        dialog.dataset.iuiFlex = 'true';
-      }
-    }
-  }, []);
-
-  return (
-    <Box
-      className={cx('iui-dialog-content', className)}
-      ref={useMergedRefs(contentRef, ref)}
-      {...rest}
-    >
-      {children}
-    </Box>
-  );
-}) as PolymorphicForwardRefComponent<'div'>;
+export const DialogContent = polymorphic.div('iui-dialog-content');
 
 export default DialogContent;

packages/itwinui-react/src/core/Dialog/DialogMain.tsx

@@ -11,8 +11,6 @@ import {
   useMergedRefs,
   useIsomorphicLayoutEffect,
   Box,
-  getTranslateValues,
-  roundByDPR,
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
@@ -77,7 +75,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
   const [style, setStyle] = React.useState<React.CSSProperties>();
 
   const dialogRef = React.useRef<HTMLDivElement>(null);
-  const [dialogElement, setDialogElement] = React.useState<HTMLElement>();
   const hasBeenResized = React.useRef(false);
   const previousFocusedElement = React.useRef<HTMLElement | null>();
 
@@ -163,11 +160,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     }));
   }, []);
 
-  const roundedTransform = useRoundedTransform({
-    element: dialogElement,
-    transform,
-  });
-
   const content = (
     <Box
       className={cx(
@@ -181,12 +173,12 @@ export const DialogMain = React.forwardRef((props, ref) => {
         className,
       )}
       role='dialog'
-      ref={useMergedRefs(dialogRef, ref, setDialogElement)}
+      ref={useMergedRefs(dialogRef, ref)}
       onKeyDown={handleKeyDown}
       tabIndex={-1}
       data-iui-placement={placement}
       style={{
-        transform: roundedTransform,
+        transform,
         ...style,
         ...propStyle,
       }}
@@ -245,32 +237,3 @@ export const DialogMain = React.forwardRef((props, ref) => {
 }) as PolymorphicForwardRefComponent<'div', DialogMainProps>;
 
 export default DialogMain;
-
-// ----------------------------------------------------------------------------
-
-/**
- * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
- */
-const useRoundedTransform = ({
-  element,
-  transform,
-}: {
-  element?: HTMLElement;
-  transform?: string;
-}) => {
-  const [roundedStyles, setRoundedStyles] = React.useState(transform);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!element || typeof DOMMatrix === 'undefined') {
-      return;
-    }
-
-    const [x, y] = transform
-      ? getTranslateValues(transform)
-      : getTranslateValuesFromElement(element);
-
-    setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
-  }, [element, transform]);
-
-  return roundedStyles;
-};