i AM SO DONE I HAVE TO STUDY FOR EXAMS

app/components/Desktop.tsx

@@ -644,9 +644,9 @@ export function Desktop() {
       />
 
       <div className="flex-1 z-10 relative pointer-events-auto">
-        {/* 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">
+        {/* Desktop Icons - Responsive grid layout, visible on all screen sizes */}
+        <div className="absolute top-16 left-2 right-2 sm:left-4 sm:right-4 bottom-24 grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-flow-col lg:grid-cols-none lg:grid-rows-[repeat(auto-fill,100px)] gap-2 sm:gap-4 pointer-events-none overflow-y-auto lg:overflow-visible z-0">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="files"
               label="Files"
@@ -657,7 +657,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="messages"
               label="Messages"
@@ -668,7 +668,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="gemini"
               label="Gemini"
@@ -678,7 +678,7 @@ export function Desktop() {
               onDoubleClick={openGeminiChat}
             />
           </div>
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="clock"
               label="Clock"
@@ -689,7 +689,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="calendar"
               label="Calendar"
@@ -700,7 +700,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="harddrive"
               label="System"
@@ -711,7 +711,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="flutter-editor"
               label="Flutter IDE"
@@ -722,7 +722,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="quiz"
               label="Quiz Master"
@@ -733,7 +733,7 @@ export function Desktop() {
             />
           </div>
 
-          <div className="pointer-events-auto w-24 h-24">
+          <div className="pointer-events-auto w-20 h-20 sm:w-24 sm:h-24">
             <DraggableDesktopIcon
               id="voice-app"
               label="Voice Studio"
@@ -745,8 +745,8 @@ export function Desktop() {
           </div>
         </div>
 
-        {/* Windows Container */}
-        <div className="fixed inset-0 top-8 pointer-events-none" style={{ position: 'fixed', top: '32px', left: 0, right: 0, bottom: 0 }}>
+        {/* Windows Container - adjusted for mobile topbar height */}
+        <div className="fixed inset-0 pointer-events-none" style={{ position: 'fixed', top: '40px', left: 0, right: 0, bottom: 0 }}>
           <AnimatePresence>
             {fileManagerOpen && (
               <motion.div

app/components/Dock.tsx

@@ -64,7 +64,7 @@ const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = fa
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onClick={handleClick}
-        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}`}
+        className={`app-icon w-10 h-10 sm:w-11 sm:h-11 md:w-12 md:h-12 rounded-xl shadow-lg flex items-center justify-center cursor-pointer border transition-all ${className}`}
         title={label}
       >
         {icon}
@@ -152,7 +152,7 @@ export function Dock({
   return (
     <div className="dock-container">
       <div
-        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"
+        className="dock-glass px-1 pb-1 pt-1.5 sm:px-2 sm:pb-1.5 sm:pt-2 md:px-3 md:pb-2 md:pt-3 rounded-t-2xl md:rounded-2xl flex items-end gap-1 sm:gap-2 md:gap-3 shadow-2xl border border-white/20 transition-all duration-300 overflow-x-auto max-w-full"
         onMouseMove={(e) => mouseX.current = e.pageX}
         onMouseLeave={() => mouseX.current = null}
       >

app/components/TopBar.tsx

@@ -24,7 +24,8 @@ interface TopBarProps {
 
 export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRestart, onShutdown }: TopBarProps) {
   const [activeMenu, setActiveMenu] = useState<'apple' | 'battery' | 'wifi' | 'clock' | null>(null)
-  const [currentTime, setCurrentTime] = useState('')
+  const [dateDisplay, setDateDisplay] = useState('')
+  const [timeDisplay, setTimeDisplay] = useState('')
   const menuRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -39,7 +40,9 @@ export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRest
         hour12: true
       })
       const dateString = `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]}`
-      setCurrentTime(`${dateString}  ${timeString}`)
+
+      setDateDisplay(dateString)
+      setTimeDisplay(timeString)
     }
 
     updateTime()
@@ -63,8 +66,8 @@ export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRest
   }
 
   return (
-    <div className="fixed top-0 left-0 right-0 h-8 glass flex items-center justify-between px-4 text-sm z-50 shadow-sm backdrop-blur-xl bg-white/40 border-b border-white/20 select-none">
-      <div className="flex items-center space-x-4" ref={menuRef}>
+    <div className="fixed top-0 left-0 right-0 h-10 sm:h-8 glass flex items-center justify-between px-2 sm:px-4 text-xs sm:text-sm z-50 shadow-sm backdrop-blur-xl bg-white/40 border-b border-white/20 select-none">
+      <div className="flex items-center space-x-2 sm:space-x-4" ref={menuRef}>
         <div className="relative">
           <button
             onClick={() => toggleMenu('apple')}
@@ -136,14 +139,14 @@ export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRest
           </AnimatePresence>
         </div>
 
-        <span className="font-bold text-gray-800">Reuben OS</span>
-        <span className="text-gray-600 text-xs ml-2 font-medium">{activeAppName}</span>
+        <span className="font-bold text-gray-800 hidden sm:inline text-xs sm:text-sm">Reuben OS</span>
+        <span className="text-gray-600 text-[10px] sm:text-xs ml-1 sm:ml-2 font-medium hidden xs:inline">{activeAppName}</span>
       </div>
 
-      <div className="flex items-center space-x-4" ref={menuRef}>
-        <div className="flex items-center space-x-3 text-gray-700">
+      <div className="flex items-center space-x-2 md:space-x-4" ref={menuRef}>
+        <div className="flex items-center space-x-1 md:space-x-3 text-gray-700">
           {/* Battery */}
-          <div className="relative">
+          <div className="relative hidden sm:block">
             <button
               onClick={() => toggleMenu('battery')}
               className={`hover:bg-black/5 rounded px-1 py-0.5 transition-colors ${activeMenu === 'battery' ? 'bg-black/10' : ''}`}
@@ -179,7 +182,7 @@ export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRest
           </div>
 
           {/* WiFi */}
-          <div className="relative">
+          <div className="relative hidden sm:block">
             <button
               onClick={() => toggleMenu('wifi')}
               className={`hover:bg-black/5 rounded px-1 py-0.5 transition-colors ${activeMenu === 'wifi' ? 'bg-black/10' : ''}`}
@@ -235,16 +238,17 @@ export function TopBar({ activeAppName = 'Finder', onAboutClick, onSleep, onRest
             </AnimatePresence>
           </div>
 
-          <MagnifyingGlass size={18} weight="bold" />
+          <MagnifyingGlass size={18} weight="bold" className="hidden sm:block" />
         </div>
 
         {/* Clock */}
         <div className="relative">
           <button
             onClick={() => toggleMenu('clock')}
-            className={`font-medium text-gray-800 min-w-[140px] text-right hover:bg-black/5 rounded px-2 py-0.5 transition-colors ${activeMenu === 'clock' ? 'bg-black/10' : ''}`}
+            className={`font-medium text-gray-800 min-w-[50px] sm:min-w-[60px] md:min-w-[140px] text-right hover:bg-black/5 rounded px-1 sm:px-2 py-0.5 transition-colors text-[11px] sm:text-xs ${activeMenu === 'clock' ? 'bg-black/10' : ''}`}
           >
-            {currentTime}
+            <span className="hidden md:inline mr-2">{dateDisplay}</span>
+            <span>{timeDisplay}</span>
           </button>
           <AnimatePresence>
             {activeMenu === 'clock' && (

app/components/Window.tsx

@@ -53,10 +53,10 @@ const Window: React.FC<WindowProps> = ({
   const currentPositionRef = React.useRef({ x, y: Math.max(y, 32) });
   const currentSizeRef = React.useRef({ width, height });
 
-  // Detect mobile device
+  // Detect mobile device - update threshold to better match small screens
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 1024);
+      setIsMobile(window.innerWidth <= 768);
     };
     checkMobile();
     window.addEventListener('resize', checkMobile);
@@ -69,22 +69,50 @@ const Window: React.FC<WindowProps> = ({
   const windowClass = darkMode ? 'bg-gray-900 border-gray-700' : 'bg-[#f5f5f5] border-gray-300/50';
   const headerClass = darkMode ? 'bg-gray-800 border-gray-700' : 'macos-window-header';
 
-  // On mobile, always render full screen
+  // Bring window to front function - define it early
+  const bringToFront = () => {
+    if (onFocus) {
+      onFocus();
+    }
+  };
+
+  // On mobile, render with reduced size instead of full screen
   if (isMobile) {
     return (
       <div
-        className={`fixed inset-0 z-50 flex flex-col overflow-hidden ${windowClass} ${className}`}
-        style={{ top: 0, bottom: 0 }}
+        className={`fixed flex flex-col overflow-hidden ${windowClass} ${className} rounded-lg shadow-2xl`}
+        style={{
+          top: '60px',
+          left: '10px',
+          right: '10px',
+          bottom: '80px',
+          zIndex: zIndex || 1000,
+          maxHeight: 'calc(100vh - 140px)'
+        }}
+        onMouseDown={bringToFront}
+        onTouchStart={bringToFront}
       >
         <div
-          className={`h-10 md:h-8 flex items-center px-3 space-x-2 border-b ${headerClass} ${headerClassName}`}
+          className={`h-12 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 className="flex space-x-2 group relative z-10">
+            <button
+              className="traffic-light traffic-close w-6 h-6 sm:w-4 sm:h-4"
+              onClick={onClose}
+              aria-label="Close"
+            />
+            <button
+              className="traffic-light traffic-min w-6 h-6 sm:w-4 sm:h-4"
+              onClick={onMinimize}
+              aria-label="Minimize"
+            />
+            <button
+              className="traffic-light traffic-max w-6 h-6 sm:w-4 sm:h-4"
+              onClick={onMaximize}
+              aria-label="Maximize"
+            />
           </div>
-          <span className="font-semibold text-gray-700 flex-1 text-center pr-10 text-xs md:text-sm">{title}</span>
+          <span className="font-semibold text-gray-700 flex-1 text-center text-sm truncate px-2">{title}</span>
         </div>
         <div className="flex-1 overflow-auto">{children}</div>
       </div>
@@ -106,14 +134,6 @@ const Window: React.FC<WindowProps> = ({
     if (onMaximize) onMaximize();
   };
 
-  // Bring window to front
-  const bringToFront = () => {
-    // Call onFocus to bring window to front
-    if (onFocus) {
-      onFocus();
-    }
-  };
-
   // Calculate Rnd props based on state
   const rndProps = isMaximized ? {
     position: { x: 0, y: 4 }, // 32px for TopBar offset (h-8 = 32px)

app/globals.css

@@ -225,6 +225,8 @@
   position: relative;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  z-index: 10;
 }
 
 .traffic-close {
@@ -368,9 +370,10 @@
     user-select: auto;
   }
 
-  /* Make windows full screen on mobile */
+  /* Don't force windows to be full screen - keep them contained */
   .macos-window {
-    @apply rounded-none shadow-lg;
+    @apply rounded-lg shadow-xl;
+    max-height: calc(100vh - 140px) !important;
   }
 
   /* Adjust dock for mobile */
@@ -380,42 +383,69 @@
 
   .dock-glass {
     @apply rounded-t-2xl rounded-b-none;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.75rem;
+    max-height: 70px;
   }
 
-  /* Hide desktop icons on mobile, use dock instead */
+  /* Dock icons smaller on mobile */
+  .dock-item {
+    @apply w-10 h-10 sm:w-12 sm:h-12;
+  }
+
+  /* Desktop icons visible on mobile now */
   .desktop-icon {
-    display: none !important;
+    display: flex !important;
+    @apply w-16 h-16 sm:w-20 sm:h-20;
   }
 
-  /* Adjust traffic lights for touch */
+  /* Desktop icon labels smaller on mobile */
+  .desktop-icon-label {
+    @apply text-[9px] sm:text-[10px];
+  }
+
+  /* Adjust traffic lights for touch - make them clickable */
   .traffic-light {
-    width: 14px;
-    height: 14px;
-    margin-right: 10px;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    @apply cursor-pointer;
+  }
+
+  /* Ensure traffic lights are always on top and show symbols */
+  .traffic-light::after {
+    font-size: 14px;
+    opacity: 1;
   }
 }
 
 /* Landscape mobile optimization */
 @media (max-width: 1024px) and (orientation: landscape) {
+
   /* Top bar more compact */
   .macos-window-header {
-    @apply h-8 px-3;
+    @apply h-10 px-3;
   }
 
+  /* Keep traffic lights larger for touch in landscape */
   .traffic-light {
-    width: 10px;
-    height: 10px;
-    margin-right: 6px;
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
   }
 
-  /* Dock even more compact in landscape */
+  /* Dock compact in landscape */
   .dock-container {
     @apply bottom-0;
   }
 
   .dock-glass {
     padding: 0.25rem 0.75rem;
+    max-height: 60px;
+  }
+
+  /* Windows should leave space for dock and topbar in landscape */
+  .macos-window {
+    max-height: calc(100vh - 100px) !important;
   }
 
   /* Scrollbars thinner on mobile */
@@ -427,6 +457,7 @@
 
 /* Portrait mobile optimization */
 @media (max-width: 768px) and (orientation: portrait) {
+
   /* Stack dock items more compactly */
   .dock-item {
     @apply gap-0;
@@ -440,11 +471,31 @@
 
 /* Touch-friendly improvements */
 @media (hover: none) and (pointer: coarse) {
-  /* Larger touch targets */
+
+  /* Larger touch targets - 44px is Apple's recommended minimum */
   .traffic-light {
-    width: 16px;
-    height: 16px;
-    margin-right: 12px;
+    min-width: 32px;
+    min-height: 32px;
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+    touch-action: manipulation;
+  }
+
+  /* Always show traffic light symbols on touch devices */
+  .traffic-close::after {
+    content: '×' !important;
+    opacity: 0.7;
+  }
+
+  .traffic-min::after {
+    content: '−' !important;
+    opacity: 0.7;
+  }
+
+  .traffic-max::after {
+    content: '+' !important;
+    opacity: 0.7;
   }
 
   /* Better tap feedback */
@@ -465,6 +516,11 @@
     background-color: transparent;
     box-shadow: none;
   }
+
+  /* Ensure windows are touch-scrollable */
+  .macos-window {
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 /* Markdown Content Styles */
@@ -472,11 +528,11 @@
   @apply text-sm leading-relaxed;
 }
 
-.markdown-content > * {
+.markdown-content>* {
   @apply mb-3;
 }
 
-.markdown-content > *:last-child {
+.markdown-content>*:last-child {
   @apply mb-0;
 }
 
@@ -517,8 +573,8 @@
   @apply ml-2;
 }
 
-.markdown-content li > ul,
-.markdown-content li > ol {
+.markdown-content li>ul,
+.markdown-content li>ol {
   @apply ml-4 mt-1;
 }