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/.env

@@ -1,4 +1,4 @@
-# VITE_API_URL=http://localhost:3000
+VITE_API_URL=http://localhost:3000
-# VITE_WEBRTC_URL=http://localhost:3001
+VITE_WEBRTC_URL=http://localhost:3001
-VITE_API_URL=https://stream.graff.estate/api
+# VITE_API_URL=https://stream.graff.estate/api
-VITE_WEBRTC_URL=https://stream.graff.estate
+# VITE_WEBRTC_URL=https://stream.graff.estate

client/src/components/DraggableContainer.tsx

@@ -505,7 +505,7 @@ export default function DraggableContainer({
       className={clsx(
         "pointer-events-auto",
         // draggable && "touch-none",
-        !isDragging && enableSnapping && "transition-all duration-500 ease-out",
+        !isDragging && enableSnapping && "transition-[inset] duration-500 ease-out",
         draggable &&
           !dragHandleRef &&
           (isDragging ? "cursor-grabbing" : "cursor-grab"),

client/src/components/SessionUsersPanel.tsx

@@ -150,18 +150,18 @@ function SessionUsersPanel({
 
   return (
     <DraggableContainer
-      enableSnapping={mode === "full"}
+      enableSnapping={mode === "mini"}
-      enabled={mode === "full"}
+      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",
+        "z-[100] 2xl:gap-[0.556vw] gap-2",
-        mode === "full"
+        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" &&
+              mode === "full" && activeCamerasCount <= 2
-                (activeCamerasCount <= 2
+                ? "m-auto"
-                  ? "m-auto"
+                : activeCamerasCount > 12
-                  : activeCamerasCount > 12
+                ? "!aspect-square w-full"
-                  ? "!aspect-square w-full"
+                : "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

client/src/components/ui/UserCamera.tsx

@@ -278,7 +278,7 @@ export default function UserCamera({
   return (
     <div
       className={clsx(
-        mode === "full"
+        mode === "mini"
           ? "aspect-square h-fit group 2xl:rounded-[1.667vw] rounded-2xl relative flex-shrink-0 pointer-events-auto 2xl:hover:w-[10.833vw] 2xl:w-[6.944vw] sm:w-[15.625vw] w-[27.778vw] overflow-hidden"
           : "aspect-video 2xl:rounded-[2.222vw] rounded-[32px] overflow-hidden group relative pointer-events-auto max-w-full h-full self-center object-cover",
         isLocal && "order-last",
@@ -294,7 +294,7 @@ export default function UserCamera({
               window.innerWidth >= 1536 ? "0.069vw" : "1px"
             } rgba(255, 255, 255, 0.3)`,
         transition:
-          mode === "full"
+          mode === "mini"
             ? "box-shadow 0.1s ease-out, width 0.3s, background-color 0.3s"
             : undefined,
       }}

client/src/components/ui/UserDevicesControls.tsx

@@ -35,7 +35,7 @@ export default function UserDevicesControls({
   return (
     <div
       className={clsx(
-        mode === "full"
+        mode === "mini"
           ? "hidden order-last 2xl:grid grid-cols-2 gap-[0.278vw] aspect-square p-[0.556vw] flex-wrap justify-between items-center size-[6.944vw] rounded-[1.667vw] bg-[#00000040] shadow-[0_4px_40px_0_#0F10111A] backdrop-blur-[10px] pointer-events-auto"
           : "2xl:flex hidden items-center gap-[0.278vw] p-[0.556vw] rounded-[1.667vw] ring-[0.104vw] ring-[#FFFFFF]/15 absolute bottom-[0.556vw] left-1/2 -translate-x-1/2 bg-[#00000040] backdrop-blur-[10px]"
       )}

client/src/pages/SessionPage.tsx

@@ -161,7 +161,7 @@ function SessionPage() {
     <div
       className={clsx(
         "overflow-hidden relative order-3 w-screen h-dvh bg-black touch-none max-2xl:flex max-2xl:portrait:items-center",
-        mode === "full" && "flex"
+        mode === "mini" && "flex"
       )}
     >
       {/* Pixel Streaming - показывается только когда сессия активна */}
@@ -169,7 +169,7 @@ function SessionPage() {
         session.mode === "stream" &&
         session.server?.localIp &&
         session.playerPort && (
-          <div className="absolute w-full h-full aspect-video">
+          <div className="absolute z-0 w-full h-full aspect-video">
             <PixelStreamingWrapper
               initialSettings={{
                 ss: `ws://${session.server.localIp}:${session.playerPort}`,
@@ -204,10 +204,10 @@ function SessionPage() {
         </div>
       )}
 
-      <ActionsSidebarWrapper className="z-[9999]">
+      <ActionsSidebarWrapper className="z-[150]">
         <FloatingActionButton onClick={toggleMode}>
           <div className="2xl:size-[1.111vw] size-4 text-white">
-            {mode === "mini" ? <FullscreenExitIcon /> : <FullscreenIcon />}
+            {mode === "full" ? <FullscreenExitIcon /> : <FullscreenIcon />}
           </div>
         </FloatingActionButton>
         <FloatingActionButton