Add mobile-responsive design with landscape optimization

app/components/Desktop.tsx

@@ -286,7 +286,7 @@ export function Desktop() {
   }
 
   return (
-    <div className="relative h-screen w-screen overflow-hidden flex" onContextMenu={handleDesktopRightClick}>
+    <div className="relative h-screen w-screen overflow-hidden flex touch-auto" onContextMenu={handleDesktopRightClick}>
       <div
         className="absolute inset-0 transition-all duration-500 ease-in-out"
         style={getBackgroundStyle()}
@@ -315,8 +315,8 @@ export function Desktop() {
       <Dock onOpenFileManager={openFileManager} onOpenCalendar={openCalendar} onOpenClock={openClock} onOpenBrowser={openBrowser} onOpenGeminiChat={openGeminiChat} />
 
       <div className="flex-1 z-10 relative">
-        {/* Desktop Icons - Positioned in a grid layout */}
-        <div className="absolute top-16 left-6 grid grid-flow-col grid-rows-[repeat(auto-fill,100px)] gap-x-4 gap-y-2 h-[calc(100vh-140px)] w-full pointer-events-none">
+        {/* Desktop Icons - Positioned in a grid layout - Hidden on mobile (use dock instead) */}
+        <div className="absolute top-16 left-6 grid grid-flow-col grid-rows-[repeat(auto-fill,100px)] gap-x-4 gap-y-2 h-[calc(100vh-140px)] w-full pointer-events-none hidden lg:grid">
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="files"

app/components/Dock.tsx

@@ -42,7 +42,7 @@ const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = fa
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={onClick}
-        className={`app-icon w-12 h-12 rounded-xl shadow-lg flex items-center justify-center cursor-pointer border transition-all ${className}`}
+        className={`app-icon w-10 h-10 md:w-12 md:h-12 rounded-xl shadow-lg flex items-center justify-center cursor-pointer border transition-all ${className}`}
         title={label}
       >
         {icon}
@@ -68,7 +68,7 @@ export function Dock({
     {
       icon: (
         <div className="bg-gradient-to-br from-blue-400 to-cyan-200 w-full h-full rounded-xl flex items-center justify-center border border-white/30">
-          <Folder size={28} weight="regular" className="text-blue-900" />
+          <Folder size={24} weight="regular" className="text-blue-900 md:scale-110" />
         </div>
       ),
       label: 'Files',
@@ -79,7 +79,7 @@ export function Dock({
       icon: (
         <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
           <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
-          <Compass size={36} weight="light" className="text-white relative z-10" />
+          <Compass size={28} weight="light" className="text-white relative z-10 md:scale-125" />
         </div>
       ),
       label: 'Browser',
@@ -89,7 +89,7 @@ export function Dock({
     {
       icon: (
         <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
-          <Sparkle size={28} weight="fill" className="text-blue-500" />
+          <Sparkle size={24} weight="fill" className="text-blue-500 md:scale-110" />
         </div>
       ),
       label: 'Gemini',
@@ -113,7 +113,7 @@ export function Dock({
     {
       icon: (
         <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
-          <CalendarIcon size={28} weight="regular" className="text-white" />
+          <CalendarIcon size={24} weight="regular" className="text-white md:scale-110" />
         </div>
       ),
       label: 'Calendar',
@@ -125,7 +125,7 @@ export function Dock({
   return (
     <div className="dock-container">
       <div
-        className="dock-glass px-3 pb-2 pt-3 rounded-2xl flex items-end gap-3 shadow-2xl border border-white/20 transition-all duration-300"
+        className="dock-glass px-2 pb-1.5 pt-2 md:px-3 md:pb-2 md:pt-3 rounded-t-2xl md:rounded-2xl flex items-end gap-2 md:gap-3 shadow-2xl border border-white/20 transition-all duration-300"
         onMouseMove={(e) => mouseX.current = e.pageX}
         onMouseLeave={() => mouseX.current = null}
       >
@@ -134,11 +134,11 @@ export function Dock({
             <DockItem {...item} mouseX={mouseX} />
             {index === dockItems.length - 1 && (
               <>
-                <div className="w-px h-10 bg-gray-400/30 mx-1" />
+                <div className="w-px h-8 md:h-10 bg-gray-400/30 mx-0.5 md:mx-1" />
                 <DockItem
                   icon={
                     <div className="bg-gradient-to-b from-gray-200 to-gray-300 w-full h-full rounded-xl flex items-center justify-center border border-white/40">
-                      <Trash size={24} weight="regular" className="text-gray-600" />
+                      <Trash size={20} weight="regular" className="text-gray-600 md:scale-110" />
                     </div>
                   }
                   label="Trash"

app/components/FlutterRunner.tsx

@@ -17,6 +17,22 @@ interface FlutterRunnerProps {
 export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [copySuccess, setCopySuccess] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+
+  // Detect mobile and auto-close sidebar on mobile landscape
+  React.useEffect(() => {
+    const checkMobile = () => {
+      const mobile = window.innerWidth <= 1024
+      setIsMobile(mobile)
+      // Auto-close sidebar on mobile landscape for more iframe space
+      if (mobile && window.innerHeight < window.innerWidth) {
+        setSidebarOpen(false)
+      }
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
 
   const handleCopyCode = async () => {
     try {
@@ -63,20 +79,22 @@ export function FlutterRunner({ file, onClose }: FlutterRunnerProps) {
             title="Zapp Flutter IDE"
           />
           
-          {/* Instruction overlay */}
-          <div className="absolute top-4 left-4 right-4 bg-blue-500/90 backdrop-blur-sm text-white px-4 py-3 rounded-lg shadow-lg border border-blue-400/50">
-            <div className="flex items-center gap-2">
-              <CodeIcon size={20} weight="bold" />
-              <p className="text-sm font-medium">
-                Use the sidebar to copy your Flutter code and dependencies, then paste into Zapp's editor.
-              </p>
+          {/* Instruction overlay - Hide on mobile when sidebar is open */}
+          {!(isMobile && sidebarOpen) && (
+            <div className="absolute top-2 left-2 right-2 md:top-4 md:left-4 md:right-4 bg-blue-500/90 backdrop-blur-sm text-white px-3 py-2 md:px-4 md:py-3 rounded-lg shadow-lg border border-blue-400/50">
+              <div className="flex items-center gap-2">
+                <CodeIcon size={isMobile ? 16 : 20} weight="bold" />
+                <p className="text-xs md:text-sm font-medium">
+                  {isMobile ? 'Tap the arrow to view code' : 'Use the sidebar to copy your Flutter code and dependencies, then paste into Zapp\'s editor.'}
+                </p>
+              </div>
             </div>
-          </div>
+          )}
         </div>
 
         {/* Collapsible Sidebar */}
         {sidebarOpen && (
-          <div className="w-[350px] border-l border-gray-200 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-lg">
+          <div className={`${isMobile ? 'w-full absolute right-0 top-0 bottom-0 z-10' : 'w-[350px]'} border-l border-gray-200 bg-gradient-to-b from-gray-50 to-white flex flex-col shadow-lg`}>
             {/* Sidebar Header */}
             <div className="h-12 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between px-4 text-white">
               <div className="flex items-center gap-2">

app/components/Window.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState, useEffect } from 'react';
 import { Rnd } from 'react-rnd';
 
 interface WindowProps {
@@ -42,9 +42,42 @@ const Window: React.FC<WindowProps> = ({
   const [previousSize, setPreviousSize] = React.useState({ width, height, x, y });
   const [currentPosition, setCurrentPosition] = React.useState({ x, y });
   const [currentSize, setCurrentSize] = React.useState({ width, height });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  // Detect mobile device
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 1024);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
   if (!isOpen) return null;
 
+  // On mobile, always render full screen
+  if (isMobile) {
+    return (
+      <div
+        className={`fixed inset-0 z-50 flex flex-col overflow-hidden ${windowClass} ${className}`}
+        style={{ top: 0, bottom: 0 }}
+      >
+        <div
+          className={`h-10 md:h-8 flex items-center px-3 space-x-2 border-b ${headerClass} ${headerClassName}`}
+        >
+          <div className="flex space-x-2 group">
+            <div className="traffic-light traffic-close" onClick={onClose} />
+            <div className="traffic-light traffic-min" onClick={onMinimize} />
+            <div className="traffic-light traffic-max" onClick={onMaximize} />
+          </div>
+          <span className="font-semibold text-gray-700 flex-1 text-center pr-10 text-xs md:text-sm">{title}</span>
+        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
+      </div>
+    );
+  }
+
   const handleMaximize = () => {
     if (!onMaximize) return;
 

app/globals.css

@@ -339,4 +339,110 @@
 
 .dock-item:hover .dock-dot {
   @apply opacity-100;
+}
+
+/* Mobile & Tablet Responsive Styles */
+@media (max-width: 1024px) {
+  body {
+    touch-action: pan-x pan-y;
+    user-select: auto;
+  }
+
+  /* Make windows full screen on mobile */
+  .macos-window {
+    @apply rounded-none shadow-lg;
+  }
+
+  /* Adjust dock for mobile */
+  .dock-container {
+    @apply bottom-0 px-2;
+  }
+
+  .dock-glass {
+    @apply rounded-t-2xl rounded-b-none;
+    padding: 0.5rem 1rem;
+  }
+
+  /* Hide desktop icons on mobile, use dock instead */
+  .desktop-icon {
+    display: none !important;
+  }
+
+  /* Adjust traffic lights for touch */
+  .traffic-light {
+    width: 14px;
+    height: 14px;
+    margin-right: 10px;
+  }
+}
+
+/* Landscape mobile optimization */
+@media (max-width: 1024px) and (orientation: landscape) {
+  /* Top bar more compact */
+  .macos-window-header {
+    @apply h-8 px-3;
+  }
+
+  .traffic-light {
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+  }
+
+  /* Dock even more compact in landscape */
+  .dock-container {
+    @apply bottom-0;
+  }
+
+  .dock-glass {
+    padding: 0.25rem 0.75rem;
+  }
+
+  /* Scrollbars thinner on mobile */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* Portrait mobile optimization */
+@media (max-width: 768px) and (orientation: portrait) {
+  /* Stack dock items more compactly */
+  .dock-item {
+    @apply gap-0;
+  }
+
+  /* Adjust font sizes for mobile */
+  .desktop-icon-label {
+    @apply text-[10px];
+  }
+}
+
+/* Touch-friendly improvements */
+@media (hover: none) and (pointer: coarse) {
+  /* Larger touch targets */
+  .traffic-light {
+    width: 16px;
+    height: 16px;
+    margin-right: 12px;
+  }
+
+  /* Better tap feedback */
+  .app-icon:active {
+    transform: scale(0.90);
+  }
+
+  .dock-item:active {
+    transform: scale(0.95);
+  }
+
+  /* Remove hover effects on touch devices */
+  .app-icon:hover {
+    transform: none;
+  }
+
+  .desktop-icon:hover {
+    background-color: transparent;
+    box-shadow: none;
+  }
 }