Enhance media device handling in SettingsModal and VoiceCheckModal; add media device availability checks and user feedback for unsupported environments. Refactor ModalWrapper and update UI components for improved responsiveness and layout consistency.

client/src/components/ui/LinkShare.tsx

@@ -21,7 +21,7 @@ export default function LinkShare({ link }: { link: string }) {
     <div className="flex flex-col gap-[0.556vw]">
       <div className="w-full h-[3.75vw] bg-[#F3F3F3] flex items-center justify-between gap-[0.833vw] px-[1.111vw] rounded-[1.111vw] relative">
         <span
-          className="text-ellipsis text-s hover:cursor-pointer overflow-hidden"
+          className="text-ellipsis text-s hover:cursor-pointer overflow-hidden text-nowrap"
           onClick={handleCopy}
         >
           {link}

client/src/components/ui/UserCamera.tsx

@@ -34,7 +34,6 @@ export default function UserCamera({
   onMute,
   onVideoOff,
   onCanControl,
-
   isSpeaking = false,
   isAdmin = false,
   name = "Гость",
@@ -53,25 +52,18 @@ export default function UserCamera({
           : "0.139vw solid #FFFFFF4D",
       }}
       className={clsx(
-        "aspect-square rounded-[1.667vw] bg-yellow-500 relative flex-shrink-0 pointer-events-auto",
+        "aspect-square group rounded-[1.667vw] bg-yellow-500 relative flex-shrink-0 transition-all duration-300 pointer-events-auto hover:w-[10.833vw]w-[6.944vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1),0_2px_2px_0_rgba(0,0,0,0.06)]",
         isAdmin && "order-3"
       )}
     >
       {isAdmin && <Admin className="absolute top-0 right-0" />}
-      <AnimatePresence mode="wait">
-        {isHover && (
-          <motion.div
-            key="name"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="absolute whitespace-nowrap text-white button-s top-[0.556vw] left-1/2 translate-x-[-50%] px-[0.556vw] py-[0.278vw] rounded-full bg-[#14141440] backdrop-blur-[4px]"
-          >
-            {name}
-          </motion.div>
-        )}
-      </AnimatePresence>
+
+      <div
+        key="name"
+        className="absolute whitespace-nowrap transition-opacity duration-300 group-hover:opacity-100 opacity-0 text-white button-s top-[0.556vw] left-1/2 translate-x-[-50%] px-[0.556vw] py-[0.278vw] rounded-full bg-[#14141440] backdrop-blur-[4px]"
+      >
+        {name}
+      </div>
 
       <video
         src={mediaStream}
@@ -149,7 +141,7 @@ function UserCameraControls({
             exit={{ opacity: 0 }}
             transition={{ duration: 0.2 }}
           >
-            <div className="size-[0.972vw] text-white flex items-center justify-center z-20">
+            <div className="size-[0.972vw] text-white">
               <MicrophoneOffIcon />
             </div>
           </motion.div>