hunk.code_window: } => {
     return {
       position: 'fixed',
       left: left ? left : horizontal ? '50%' : 'auto',
       top: top ? top : vertical ? '50%' : 'auto',
       right: right ? right : horizontal ? 'auto' : 'auto',
       bottom: bottom ? bottom : vertical ? 'auto' : 'auto',
       transform: `translate(${horizontal ? '-50%' : '0'}, ${
         vertical ? '-50%' : '0'
       })`,
     };
  
hunk.labels: keep keep keep keep keep replace replace keep keep keep keep
hunk.after_edit:     right: right ? right : 'auto',
       bottom: bottom ? bottom : 'auto',
  
hunk.file_path: packages/component/src/styles/helper.ts
hunk.type: replace
file: import React, { useState } from 'react';
  import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
  import getIsMobile from '@/utils/get-is-mobile';
  import { StyledButton, StyledContent, StyledTitle } from './styles';
  import bg from './bg.png';
  import { useTranslation } from '@affine/i18n';
  export const MobileModal = () => {
    const [showModal, setShowModal] = useState(getIsMobile());
    const { t } = useTranslation();
    return (
      <Modal
        open={showModal}
        onClose={() => {
          setShowModal(false);
        }}
      >
        <ModalWrapper
          width={348}
          height={388}
          style={{ backgroundImage: `url(${bg.src})` }}
        >
          <ModalCloseButton
            size={[30, 30]}
            iconSize={[20, 20]}
            onClick={() => {
              setShowModal(false);
            }}
          />
  
          <StyledTitle>{t('Ooops!')}</StyledTitle>
          <StyledContent>
            <p>{t('mobile device')}</p>
            <p>{t('mobile device description')}</p>
          </StyledContent>
          <StyledButton
            onClick={() => {
              setShowModal(false);
            }}
          >
            {t('Got it')}
          </StyledButton>
        </ModalWrapper>
      </Modal>
    );
  };
  
  export default MobileModal;
  