Update environment variables for local development, adjust DraggableContainer and SessionUsersPanel to switch between 'mini' and 'full' modes, and refactor UserCamera and UserDevicesControls for improved styling and responsiveness. Clean up SessionPage layout for better structure.

client/src/components/SessionUsersPanel.tsx

@@ -150,18 +150,18 @@ function SessionUsersPanel({
 
   return (
     <DraggableContainer
-      enableSnapping={mode === "full"}
-      enabled={mode === "full"}
+      enableSnapping={mode === "mini"}
+      enabled={mode === "mini"}
       autoAlign={true}
       initialCorner={
         windowDimensions.width >= 640 ? "bottom-right" : "top-right"
       }
       padding="1.111vw"
       className={clsx(
-        "z-[999] 2xl:gap-[0.556vw] gap-2",
-        mode === "full"
+        "z-[100] 2xl:gap-[0.556vw] gap-2",
+        mode === "mini"
           ? "flex"
-          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:max-h-[calc(100dvh-17.778vw)] max-2xl:landscape:max-h-[calc(100dvh-8.75vw)] grid grid-cols-${gridColumns}`
+          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:max-h-[calc(100dvh-17.778vw)] max-2xl:landscape:max-h-[calc(100dvh-8.75vw)] grid grid-cols-${gridColumns} relative bg-black`
       )}
     >
       {localStream &&
@@ -181,12 +181,11 @@ function SessionUsersPanel({
             onCanControl={() => console.log("Toggle control")}
             onSpeakingChange={handleSpeakingChange}
             className={clsx(
-              mode === "mini" &&
-                (activeCamerasCount <= 2
-                  ? "m-auto"
-                  : activeCamerasCount > 12
-                  ? "!aspect-square w-full"
-                  : "w-full")
+              mode === "full" && activeCamerasCount <= 2
+                ? "m-auto"
+                : activeCamerasCount > 12
+                ? "!aspect-square w-full"
+                : "w-full"
             )}
           />
         ))}
@@ -201,7 +200,7 @@ function SessionUsersPanel({
         .map((participant) => (
           <UserCamera
             className={clsx(
-              mode === "mini" &&
+              mode === "full" &&
                 (activeCamerasCount <= 2
                   ? "m-auto"
                   : activeCamerasCount > 12