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/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({