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,6 +67,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           className={clsx(styles.modalOverlay, overlayClassName)}
           {...otherOverlayOptions}
         />
+        <div className={styles.modalContentWrapper}>
           <Dialog.Content
             className={clsx(styles.modalContent, contentClassName)}
             style={{
@@ -93,7 +94,9 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
               </Dialog.Close>
             )}
             {title ? (
-            <Dialog.Title className={styles.modalHeader}>{title}</Dialog.Title>
+              <Dialog.Title className={styles.modalHeader}>
+                {title}
+              </Dialog.Title>
             ) : null}
             {description ? (
               <Dialog.Description className={styles.modalDescription}>
@@ -103,6 +106,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
 
             {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({