feat: update mobile app view styles and improve touch handling for back navigation

src/components/MobileAppView/MobileAppView.css

@@ -1,6 +1,9 @@
 .mobile-app-view {
   position: fixed;
-  inset: 0;
+  top: var(--mobile-statusbar-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
   background: #0d0d1a;
   display: flex;
   flex-direction: column;
@@ -20,15 +23,21 @@
 
 .mobile-back-btn {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11px;
-  color: var(--pixel-cyan);
+  color: #0d0d1a;
-  letter-spacing: 0.5px;
+  background: var(--pixel-cyan);
+  border: 2px solid var(--pixel-cyan);
+  box-shadow: 2px 2px 0 #000;
+  padding: 4px 10px;
   cursor: pointer;
-  background: none;
+  letter-spacing: 0.5px;
-  border: none;
-  padding: 0;
-  -webkit-tap-highlight-color: transparent;
   flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-back-btn:active {
+  box-shadow: none;
+  transform: translate(2px, 2px);
 }
 
 .mobile-app-title {

src/components/MobileAppView/MobileAppView.tsx

@@ -10,22 +10,12 @@ interface Props {
 
 export default function MobileAppView({ appId, onBack }: Props) {
   const app = APPS.find(a => a.id === appId);
-  const dragStartY = useRef<number | null>(null);
+  const touchStartY = useRef<number | null>(null);
 
   if (!app) return null;
 
   const AppComponent = app.component;
 
-  function handleDragStart(y: number) {
-    dragStartY.current = y;
-  }
-
-  function handleDragEnd(y: number) {
-    if (dragStartY.current === null) return;
-    if (y - dragStartY.current > 60) onBack();
-    dragStartY.current = null;
-  }
-
   return (
     <motion.div
       className="mobile-app-view"
@@ -33,14 +23,15 @@ export default function MobileAppView({ appId, onBack }: Props) {
       animate={{ x: 0 }}
       exit={{ x: '100%' }}
       transition={{ duration: 0.22, ease: 'easeOut' }}
-      onTouchStart={e => handleDragStart(e.touches[0].clientY)}
+      onTouchStart={e => { touchStartY.current = e.touches[0].clientY; }}
-      onTouchEnd={e => handleDragEnd(e.changedTouches[0].clientY)}
+      onTouchEnd={e => {
-      onMouseDown={e => handleDragStart(e.clientY)}
+        if (touchStartY.current !== null && e.changedTouches[0].clientY - touchStartY.current > 60) onBack();
-      onMouseUp={e => handleDragEnd(e.clientY)}
+        touchStartY.current = null;
+      }}
     >
       <div className="mobile-app-topbar">
         <button className="mobile-back-btn" onClick={onBack}>
-          ← back
+          ← HOME
         </button>
         <span className="mobile-app-title">{app.title}</span>
         <span className="mobile-app-topbar-spacer" />