fix(mobile): header will be clipped when modal opened and page scroll…

…ed (#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.
toeverything · Sep 4, 2024 · 51bc40d · 51bc40d
1 parent 2524491
commit 51bc40d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git 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
@@ -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({