Refactor SessionUsersPanel to display multiple local cameras based on a defined count, enhance grid column calculations for better responsiveness, and update UserCamera component styling. Adjust ControlsPopover z-index for improved visibility and clean up SessionPage layout for consistency.

client/src/components/SessionUsersPanel.tsx

@@ -5,6 +5,8 @@ import { useWebRTC } from "../hooks/useWebRTC";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
+const LOCAL_CAMERAS_COUNT = 10;
+
 interface SessionUsersPanelProps {
   roomId: string;
   autoJoin?: boolean;
@@ -114,7 +116,7 @@ function SessionUsersPanel({
 
   // Вычисляем количество камер для grid
   const activeCamerasCount =
-    (localStream ? 1 : 0) +
+    (localStream ? LOCAL_CAMERAS_COUNT : 0) +
     participants.filter(
       (p) => p.stream != null && p.stream.getTracks().length > 0
     ).length;
@@ -129,7 +131,7 @@ function SessionUsersPanel({
 
   const getMobilePortraitGridColumns = (count: number): number => {
     if (count <= 3) return 1;
-    if (count <= 8) return 2;
+    if (count <= 12) return 2;
     return 3;
   };
 
@@ -159,29 +161,35 @@ function SessionUsersPanel({
         "z-[999] 2xl:gap-[0.556vw] gap-2",
         mode === "full"
           ? "flex"
-          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:h-[calc(100dvh-17.778vw)] max-2xl:landscape: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}`
       )}
     >
-      {localStream && (
-        <UserCamera
-          mode={mode}
-          name="Вы"
-          isMuted={isLocalAudioMuted}
-          isVideoOff={isLocalVideoMuted}
-          isControlDisabled={false}
-          isAdmin={true}
-          isLocal={true}
-          mediaStream={localStream}
-          onMute={toggleAudio}
-          onVideoOff={toggleVideo}
-          onCanControl={() => console.log("Toggle control")}
-          onSpeakingChange={handleSpeakingChange}
-          className={clsx(
-            mode === "mini" &&
-              (activeCamerasCount <= 2 ? "2xl:m-auto" : "w-full")
-          )}
-        />
-      )}
+      {localStream &&
+        Array.from({ length: LOCAL_CAMERAS_COUNT }).map((_, index) => (
+          <UserCamera
+            key={index}
+            mode={mode}
+            name="Вы"
+            isMuted={isLocalAudioMuted}
+            isVideoOff={isLocalVideoMuted}
+            isControlDisabled={false}
+            isAdmin={true}
+            isLocal={true}
+            mediaStream={localStream}
+            onMute={toggleAudio}
+            onVideoOff={toggleVideo}
+            onCanControl={() => console.log("Toggle control")}
+            onSpeakingChange={handleSpeakingChange}
+            className={clsx(
+              mode === "mini" &&
+                (activeCamerasCount <= 2
+                  ? "m-auto"
+                  : activeCamerasCount > 12
+                  ? "!aspect-square w-full"
+                  : "w-full")
+            )}
+          />
+        ))}
 
       {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
       {participants
@@ -194,7 +202,11 @@ function SessionUsersPanel({
           <UserCamera
             className={clsx(
               mode === "mini" &&
-                (activeCamerasCount <= 2 ? "2xl:m-auto" : "w-full")
+                (activeCamerasCount <= 2
+                  ? "m-auto"
+                  : activeCamerasCount > 12
+                  ? "!aspect-square w-full"
+                  : "w-full")
             )}
             key={participant.id}
             mode={mode}