fix(component): modal blurness (#5177)

moved https://github.com/toeverything/design/pull/108

Do not use transform to center the modal. It has know issue to cause modal to have blurred texts.

https://github.com/radix-ui/website/issues/383

fix https://github.com/toeverything/AFFiNE/issues/5176

packages/frontend/component/src/ui/modal/modal.tsx

@@ -67,42 +67,46 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           className={clsx(styles.modalOverlay, overlayClassName)}
           {...otherOverlayOptions}
         />
-        <Dialog.Content
-          className={clsx(styles.modalContent, contentClassName)}
-          style={{
-            ...assignInlineVars({
-              [styles.widthVar]: getVar(width, '50vw'),
-              [styles.heightVar]: getVar(height, 'unset'),
-              [styles.minHeightVar]: getVar(minHeight, '26px'),
-            }),
-            ...contentStyle,
-          }}
-          {...otherContentOptions}
-          ref={ref}
-        >
-          {withoutCloseButton ? null : (
-            <Dialog.Close asChild>
-              <IconButton
-                className={styles.closeButton}
-                aria-label="Close"
-                type="plain"
-                {...closeButtonOptions}
-              >
-                <CloseIcon />
-              </IconButton>
-            </Dialog.Close>
-          )}
-          {title ? (
-            <Dialog.Title className={styles.modalHeader}>{title}</Dialog.Title>
-          ) : null}
-          {description ? (
-            <Dialog.Description className={styles.modalDescription}>
-              {description}
-            </Dialog.Description>
-          ) : null}
+        <div className={styles.modalContentWrapper}>
+          <Dialog.Content
+            className={clsx(styles.modalContent, contentClassName)}
+            style={{
+              ...assignInlineVars({
+                [styles.widthVar]: getVar(width, '50vw'),
+                [styles.heightVar]: getVar(height, 'unset'),
+                [styles.minHeightVar]: getVar(minHeight, '26px'),
+              }),
+              ...contentStyle,
+            }}
+            {...otherContentOptions}
+            ref={ref}
+          >
+            {withoutCloseButton ? null : (
+              <Dialog.Close asChild>
+                <IconButton
+                  className={styles.closeButton}
+                  aria-label="Close"
+                  type="plain"
+                  {...closeButtonOptions}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Dialog.Close>
+            )}
+            {title ? (
+              <Dialog.Title className={styles.modalHeader}>
+                {title}
+              </Dialog.Title>
+            ) : null}
+            {description ? (
+              <Dialog.Description className={styles.modalDescription}>
+                {description}
+              </Dialog.Description>
+            ) : null}
 
-          {children}
-        </Dialog.Content>
+            {children}
+          </Dialog.Content>
+        </div>
       </Dialog.Portal>
     </Dialog.Root>
   )

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -11,6 +11,15 @@ export const modalOverlay = style({
   zIndex: 'var(--affine-z-index-modal)',
 });
 
+export const modalContentWrapper = style({
+  position: 'fixed',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 'var(--affine-z-index-modal)',
+});
+
 export const modalContent = style({
   vars: {
     [widthVar]: '',
@@ -25,17 +34,13 @@ export const modalContent = style({
   fontWeight: '400',
   lineHeight: '1.6',
   padding: '20px 24px',
+  position: 'relative',
   backgroundColor: 'var(--affine-background-overlay-panel-color)',
   boxShadow: 'var(--affine-popover-shadow)',
   borderRadius: '12px',
   maxHeight: 'calc(100vh - 32px)',
   // :focus-visible will set outline
   outline: 'none',
-  position: 'fixed',
-  zIndex: 'var(--affine-z-index-modal)',
-  top: ' 50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
 });
 
 export const closeButton = style({