Fixes the mobile workbench bottom navigation bar on iOS browsers

src/app/app/workbench/[id]/page.tsx

@@ -280,14 +280,13 @@ export default function Home() {
   return (
     <main
       className={cn(
-        "w-full min-h-screen  overflow-hidden",
-        "w-full min-h-screen overflow-hidden",
+        "flex h-screen h-[100dvh] w-full flex-col overflow-hidden",
         "bg-background text-foreground"
       )}
     >
       <EditorHeader />
       {/* 桌面端布局 */}
-      <div className="hidden md:block h-[calc(100vh-64px)] relative flex w-full">
+      <div className="relative hidden min-h-0 flex-1 w-full md:block">
         <div className={cn(
           "h-full transition-all duration-300",
           previewPanelCollapsed ? "w-[calc(100%-4rem)]" : "w-full"
@@ -371,7 +370,7 @@ export default function Home() {
       </div>
 
       {/* 移动端布局 */}
-      <div className="md:hidden h-[calc(100vh-64px)]">
+      <div className="min-h-0 flex-1 md:hidden">
         <MobileWorkbench />
       </div>
     </main>

src/app/globals.css

@@ -136,7 +136,11 @@
   }
 
   body.workbench-body-lock {
-    overflow-y: hidden;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
   }
 
 

src/components/editor/EditorHeader.tsx

@@ -59,7 +59,7 @@ export function EditorHeader({ isMobile }: EditorHeaderProps) {
 
   return (
     <motion.header
-      className={`h-16 border-b sticky top-0 z-10`}
+      className="sticky top-0 z-10 h-16 shrink-0 border-b bg-background"
       initial={{ y: -100 }}
       animate={{ y: 0 }}
     >
@@ -171,4 +171,3 @@ export function EditorHeader({ isMobile }: EditorHeaderProps) {
     </motion.header>
   );
 }
-

src/components/mobile/MobileWorkbench.tsx

@@ -21,7 +21,7 @@ export function MobileWorkbench() {
     <button
       onClick={() => setActiveTab(tab)}
       className={cn(
-        "flex flex-col items-center justify-center py-2 px-4 flex-1 transition-colors",
+        "relative flex flex-1 flex-col items-center justify-center px-4 py-2 transition-colors",
         activeTab === tab
           ? "text-primary"
           : "text-muted-foreground hover:text-primary/80"
@@ -34,14 +34,14 @@ export function MobileWorkbench() {
       {activeTab === tab && (
         <motion.div
           layoutId="mobile-nav-indicator"
-          className="absolute bottom-0 w-12 h-1 bg-primary rounded-t-full"
+          className="absolute top-0 h-1 w-12 rounded-b-full bg-primary"
         />
       )}
     </button>
   );
 
   return (
-    <div className="flex flex-col h-[calc(100vh-64px)] bg-background">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
       {/* 主要内容区域 */}
       <div className="flex-1 overflow-hidden relative">
         <AnimatePresence mode="wait">
@@ -138,10 +138,12 @@ export function MobileWorkbench() {
       </div>
 
       {/* 底部导航栏 */}
-      <div className="h-16 border-t bg-background flex items-center justify-around relative shadow-[0_-1px_3px_rgba(0,0,0,0.05)] z-50">
-        {renderNavItem("content", <FileText className="w-5 h-5" />, "内容")}
-        {renderNavItem("style", <Palette className="w-5 h-5" />, "样式")}
-        {renderNavItem("preview", <Eye className="w-5 h-5" />, "预览")}
+      <div className="relative z-50 shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] shadow-[0_-1px_3px_rgba(0,0,0,0.05)]">
+        <div className="flex h-16 items-center justify-around">
+          {renderNavItem("content", <FileText className="w-5 h-5" />, "内容")}
+          {renderNavItem("style", <Palette className="w-5 h-5" />, "样式")}
+          {renderNavItem("preview", <Eye className="w-5 h-5" />, "预览")}
+        </div>
       </div>
     </div>
   );

src/routes/__root.tsx

@@ -22,7 +22,7 @@ export const Route = createRootRoute({
       { charSet: "utf-8" },
       {
         name: "viewport",
-        content: "width=device-width, initial-scale=1"
+        content: "width=device-width, initial-scale=1, viewport-fit=cover"
       },
       { title: "Magic Resume" }
     ],