Add mobile compatibility concept, Pixel 6 demo video infrastructure, and CI/CD workflow (#1006)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

app/index.html

@@ -18,6 +18,49 @@
       outline: none;
     }
 
+    /* Mobile-specific responsive styles */
+    @media (max-width: 768px) {
+      /* Increase touch target sizes for better mobile UX */
+      button {
+        min-height: 44px !important;
+        min-width: 44px !important;
+      }
+
+      /* Make icons larger on mobile */
+      svg {
+        font-size: 1.5rem !important;
+      }
+
+      /* Improve tree node tap targets */
+      [data-testid="tree-node"] {
+        min-height: 44px !important;
+        padding: 8px 12px !important;
+      }
+
+      /* Better mobile typography */
+      body {
+        font-size: 16px !important;
+      }
+
+      /* Prevent text selection on mobile taps - applied to interactive elements */
+      button, a, [role="button"], [data-testid] {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+      }
+
+      /* Improve scrolling performance for scrollable containers */
+      [style*="overflow"], .MuiDrawer-root, [data-testid="tree-container"] {
+        -webkit-overflow-scrolling: touch;
+      }
+
+      /* Make resizers more visible on mobile */
+      .Resizer.vertical::before,
+      .Resizer.horizontal::before {
+        font-size: 1.5rem !important;
+        opacity: 0.8 !important;
+      }
+    }
+
     @keyframes updateDark {
       0% {
         background-color: none;

app/src/components/Layout/ContentView.tsx

@@ -20,8 +20,11 @@ interface Props {
 }
 
 function ContentView(props: Props) {
+  // Use different defaults for mobile viewports (<=768px width)
+  // Use useState with lazy initialization to get initial mobile state
+  const [isMobile] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= 768)
   const [height, setHeight] = React.useState<string | number>('100%')
-  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
+  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>(isMobile ? '100%' : '40%')
   const [detectedHeight, setDetectedHeight] = React.useState(0)
   const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
   
@@ -109,7 +112,12 @@ function ContentView(props: Props) {
           <div ref={widthRef} style={{ height: '100%' }}>
             <div
               className={props.paneDefaults}
-              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
+              style={{ 
+                minWidth: isMobile ? '100%' : '250px', 
+                height: '100%', 
+                overflowY: 'auto', 
+                overflowX: 'hidden' 
+              }}
             >
               <Sidebar connectionId={props.connectionId} />
             </div>