From c905daaf02f548d1657f51ed88cae6be66a1fcd5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 22 Jun 2026 00:30:13 +0800
Subject: [PATCH] fix: apply mobile drawer position globally

---
 src/global.less     |  5 +++++
 src/global.style.ts | 12 ------------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/global.less b/src/global.less
index 92230460..621ce9db 100644
--- a/src/global.less
+++ b/src/global.less
@@ -65,6 +65,11 @@ body,
   display: none;
 }
 
+// Keep ProLayout's mobile inline drawer attached to the viewport while the page scrolls.
+.ant-pro-layout .ant-layout-has-sider > .ant-drawer.ant-drawer-inline {
+  position: fixed;
+}
+
 canvas {
   display: block;
 }
diff --git a/src/global.style.ts b/src/global.style.ts
index 531d8a90..52bbf122 100644
--- a/src/global.style.ts
+++ b/src/global.style.ts
@@ -1,17 +1,6 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(() => {
-  // Override ProLayout mobile drawer position to ensure it appears above the mask overlay.
-  // `position: fixed` is needed because ProLayout uses `ant-drawer-inline` which sets
-  // `position: absolute`, causing the drawer to render below the mask on mobile.
-  // Cast via Record to satisfy createStyles' return type for dot-separated selectors.
-  const drawerFix: Record<string, React.CSSProperties> = {
-    '.ant-drawer.ant-drawer-inline.ant-pro-drawer-sider': {
-      position:
-        'fixed !important' as unknown as React.CSSProperties['position'],
-    },
-  };
-
   return {
     colorWeak: {
       filter: 'invert(80%)',
@@ -25,7 +14,6 @@ const useStyles = createStyles(() => {
     '.ant-pro-sider-collapsed .ant-pro-sider-link span:not([role="img"])': {
       display: 'none',
     },
-    ...drawerFix,
     canvas: {
       display: 'block',
     },