From 51bc40d2a82855a535aafbf5d6927762d6864a9d Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Wed, 4 Sep 2024 09:36:18 +0000
Subject: [PATCH] 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            | 3 +++
 packages/frontend/mobile/src/views/home-header/styles.css.ts | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/packages/frontend/mobile/src/styles/mobile.css.ts b/packages/frontend/mobile/src/styles/mobile.css.ts
index 4d8753890..d7f315ed9 100644
--- a/packages/frontend/mobile/src/styles/mobile.css.ts
+++ b/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',
+});
diff --git a/packages/frontend/mobile/src/views/home-header/styles.css.ts b/packages/frontend/mobile/src/views/home-header/styles.css.ts
index f52c2c3e6..19f1c3fb1 100644
--- a/packages/frontend/mobile/src/views/home-header/styles.css.ts
+++ b/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({