chore(core): set read-only mode on mobile device (#7651)

Close [BS-795](https://linear.app/affine-design/issue/BS-795/affine-mobile-设置只读模式)

- Set read-only mode on mobile device
- Add mobile only support read-only warning toast
- remove `user-select: none` so that user can select text in read-only mode

packages/frontend/component/src/components/affine-banner/index.css.ts

@@ -3,8 +3,8 @@ import { style } from '@vanilla-extract/css';
 export const browserWarningStyle = style({
   backgroundColor: cssVar('backgroundWarningColor'),
   color: cssVar('warningColor'),
-  height: '36px',
   width: '100%',
+  padding: '8px 16px',
   fontSize: cssVar('fontSm'),
   display: 'flex',
   justifyContent: 'center',