From c408d732574a7fcbfd4825605007d8d17d4e1445 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 21 Nov 2024 02:05:26 +0000
Subject: [PATCH] fix(mobile): fix home header setting icon (#8859)

---
 .../core/src/mobile/views/home-header/index.tsx  |  4 +---
 .../src/mobile/views/home-header/styles.css.ts   | 16 ++++++++++------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/core/src/mobile/views/home-header/index.tsx b/packages/frontend/core/src/mobile/views/home-header/index.tsx
index 625423c573..9ed72f1ea7 100644
--- a/packages/frontend/core/src/mobile/views/home-header/index.tsx
+++ b/packages/frontend/core/src/mobile/views/home-header/index.tsx
@@ -58,9 +58,7 @@ export const HomeHeader = () => {
   return (
     <>
       <SafeArea top className={styles.root}>
-        <div className={styles.headerSettingRow}>
-          <IconButton onClick={openSetting} size={28} icon={<SettingsIcon />} />
-        </div>
+        <div className={styles.headerSettingRow} />
         <div className={styles.wsSelectorAndSearch}>
           <WorkspaceSelector ref={workspaceCardRef} />
           <SearchInput placeholder={t['Quick search']()} onClick={navSearch} />
diff --git a/packages/frontend/core/src/mobile/views/home-header/styles.css.ts b/packages/frontend/core/src/mobile/views/home-header/styles.css.ts
index 4d62cf4cb3..e30138d4e4 100644
--- a/packages/frontend/core/src/mobile/views/home-header/styles.css.ts
+++ b/packages/frontend/core/src/mobile/views/home-header/styles.css.ts
@@ -14,10 +14,7 @@ export const root = style({
   width: '100dvw',
 });
 export const headerSettingRow = style({
-  display: 'flex',
-  justifyContent: 'end',
   height: 44,
-  paddingRight: 10,
 });
 export const wsSelectorAndSearch = style({
   display: 'flex',
@@ -30,7 +27,6 @@ export const float = style({
   position: 'fixed',
   top: 0,
   width: '100%',
-  background: cssVarV2('layer/background/mobile/primary'),
   zIndex: 1,
 
   display: 'flex',
@@ -39,14 +35,22 @@ export const float = style({
   gap: 10,
 
   // visibility control
-  visibility: 'hidden',
+  background: 'transparent',
   selectors: {
     '&.dense': {
-      visibility: 'visible',
+      background: cssVarV2('layer/background/mobile/primary'),
     },
   },
 });
 export const floatWsSelector = style({
   width: 0,
   flex: 1,
+  visibility: 'hidden',
+  pointerEvents: 'none',
+  selectors: {
+    [`${float}.dense &`]: {
+      visibility: 'visible',
+      pointerEvents: 'auto',
+    },
+  },
 });