Update index.html

public/index.html

@@ -2696,18 +2696,53 @@
         );
       }
 
-      // Modern Layout (default) - Compact single-screen design
+      // Modern Layout (default) - Compact single-screen design with viewport scaling
+      
+      // Calculate scale factor to fit content in viewport
+      const [scale, setScale] = useState(1);
+      
+      useEffect(() => {
+        const calculateScale = () => {
+          const minHeight = 900; // Design height
+          const minWidth = 1400; // Design width
+          const vh = window.innerHeight;
+          const vw = window.innerWidth;
+          
+          const scaleH = vh / minHeight;
+          const scaleW = vw / minWidth;
+          const newScale = Math.min(scaleH, scaleW, 1); // Never scale above 1
+          
+          setScale(Math.max(newScale, 0.5)); // Minimum 50% scale
+        };
+        
+        calculateScale();
+        window.addEventListener('resize', calculateScale);
+        return () => window.removeEventListener('resize', calculateScale);
+      }, []);
+      
       return (
         <div style={{ 
+          width: '100vw',
           height: '100vh',
           background: 'var(--bg-primary)',
-          display: 'grid',
+          display: 'flex',
-          gridTemplateColumns: '280px 1fr 280px',
+          justifyContent: 'center',
-          gridTemplateRows: '50px 1fr',
+          alignItems: 'center',
-          gap: '8px',
-          padding: '8px',
           overflow: 'hidden'
         }}>
+          <div style={{ 
+            width: scale < 1 ? `${100 / scale}vw` : '100vw',
+            height: scale < 1 ? `${100 / scale}vh` : '100vh',
+            transform: `scale(${scale})`,
+            transformOrigin: 'center center',
+            display: 'grid',
+            gridTemplateColumns: '280px 1fr 280px',
+            gridTemplateRows: '50px 1fr',
+            gap: '8px',
+            padding: '8px',
+            overflow: 'hidden',
+            boxSizing: 'border-box'
+          }}>
           {/* TOP BAR - spans full width */}
           <div style={{ 
             gridColumn: '1 / -1',
@@ -2888,6 +2923,7 @@
               </div>
             </div>
           </div>
+          </div>
 
           {/* Settings Panel */}
           <SettingsPanel