fix(mobile): header will be clipped when modal opened and page scrolled (#8079)

close AF-1332

This issue is caused by radix, it will set `overflow: hidden` to body when modal opened. And header is implemented with `position: sticky`.

> **why not use `position: fixed` for header?**
>
> We need to handle `padding-top` manually to avoid content covered by header.

packages/frontend/mobile/src/styles/mobile.css.ts

@@ -21,3 +21,6 @@ globalStyle('html', {
   overflowY: 'auto',
   background: cssVarV2('layer/background/secondary'),
 });
+globalStyle('body[data-scroll-locked][style]', {
+  overflow: 'clip !important',
+});

packages/frontend/mobile/src/views/home-header/styles.css.ts

@@ -48,6 +48,8 @@ export const wsSelectorWrapper = style({
   flex: 1,
   height: wsSelectorHeight,
   padding: '0 10px 0 16px',
+  display: 'flex',
+  alignItems: 'center',
 });
 
 export const settingWrapper = style({