diff --git a/src/layouts/MainLayout.module.css b/src/layouts/MainLayout.module.css
index 668aa7c..25069b0 100644
--- a/src/layouts/MainLayout.module.css
+++ b/src/layouts/MainLayout.module.css
@@ -93,6 +93,7 @@
   min-width: 0;
   min-height: 0;
   position: relative;
+  --mobile-topbar-height: 0px;
   /* Let child components handle their own scrolling for sticky headers */
   overflow: hidden;
   background: var(--bg-primary, #ffffff);
@@ -229,6 +230,10 @@
     border-bottom: 1px solid var(--border-color, #e0e0e0);
   }
 
+  .content {
+    --mobile-topbar-height: 57px;
+  }
+
   .mobileBackdrop {
     display: block;
     position: fixed;
diff --git a/src/pages/views/workspace/WorkspaceKeepAlive.tsx b/src/pages/views/workspace/WorkspaceKeepAlive.tsx
index 3202883..7c8fc1c 100644
--- a/src/pages/views/workspace/WorkspaceKeepAlive.tsx
+++ b/src/pages/views/workspace/WorkspaceKeepAlive.tsx
@@ -35,7 +35,7 @@ export const WorkspaceKeepAlive: React.FC<WorkspaceKeepAliveProps> = ({ isVisibl
         display: isVisible ? 'flex' : 'none',
         flexDirection: 'column',
         position: 'absolute',
-        top: 0,
+        top: 'var(--mobile-topbar-height, 0px)',
         left: 0,
         right: 0,
         bottom: 0,