(feat): improve mobile cal ui a bit

(feat): add popout for call ui on mobile
(fix): fix cache and profile avatar upload stuff

packages/call/src/views/main/grid.tsx

@@ -2,6 +2,7 @@ import { RoomEvent } from "livekit-client";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useCall, getRoom } from "../../store";
 import Base from "../../components/modals/base";
+import { cn, useIsMobile } from "@methanium/ui";
 
 const TILE_ASPECT_RATIO = 16 / 9;
 const GRID_GAP = 12;
@@ -214,6 +215,8 @@ export default function View() {
     return room.getParticipantByIdentity(String(participantId));
   }
 
+  const isMobile = useIsMobile();
+
   return (
     <div
       ref={containerRef}
@@ -221,7 +224,7 @@ export default function View() {
         height: "calc(100% - 2rem)",
         width: "calc(100% - 2rem)",
       }}
-      className="overflow-hidden p-3"
+      className={cn("overflow-hidden", isMobile ? "" : "p-3")}
     >
       <div className="flex h-full w-full flex-col items-center justify-center gap-3">
         {rows.map((row) => (

packages/call/src/views/main/layout.tsx

@@ -7,6 +7,7 @@ import {
   triggerCallLayoutCalculation,
   useCall,
 } from "../../store";
+import { useIsMobile } from "@methanium/ui";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const screenRef = useRef<HTMLDivElement>(null);
@@ -129,6 +130,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     setIsImmersiveChromeVisible(false);
   };
 
+  const isMobile = useIsMobile();
+
   return (
     <div
       ref={screenRef}
@@ -139,23 +142,25 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       onMouseMove={showImmersiveChrome}
       onMouseLeave={hideImmersiveChrome}
     >
-      <div
-        ref={topBarRef}
-        className={`shrink-0 w-full z-40 transition-all duration-200 ${
-          isImmersiveFocusedView
-            ? immersiveChromeVisible
-              ? "opacity-100 translate-y-0 pointer-events-auto"
-              : "opacity-0 -translate-y-2 pointer-events-none"
-            : "opacity-100 translate-y-0"
-        }`}
-        style={{
-          position: usersInFocusedViewHidden ? "absolute" : "relative",
-          top: 0,
-          left: 0,
-        }}
-      >
-        <TopBar />
-      </div>
+      {!isMobile && (
+        <div
+          ref={topBarRef}
+          className={`shrink-0 w-full z-40 transition-all duration-200 ${
+            isImmersiveFocusedView
+              ? immersiveChromeVisible
+                ? "opacity-100 translate-y-0 pointer-events-auto"
+                : "opacity-0 -translate-y-2 pointer-events-none"
+              : "opacity-100 translate-y-0"
+          }`}
+          style={{
+            position: usersInFocusedViewHidden ? "absolute" : "relative",
+            top: 0,
+            left: 0,
+          }}
+        >
+          <TopBar />
+        </div>
+      )}
       <div
         className="min-h-0 flex-1 w-full flex justify-center items-center overflow-hidden"
         style={