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/modals/VoiceCheckModal.tsx

@@ -7,6 +7,7 @@ import RestartIcon from "../icons/RestartIcon";
 import useModalStore from "../../store/modalStore";
 import SettingsModal from "./SettingsModal";
 import clsx from "clsx";
+import { isMediaDevicesSupported } from "../../lib/mediaDevices";
 
 interface VoiceCheckModalProps {
   selectedMicrophone: string;
@@ -65,6 +66,16 @@ function VoiceCheckModal({
   }
 
   async function startMicrophoneTest() {
+    // Проверяем доступность API
+    if (!isMediaDevicesSupported()) {
+      console.error(
+        "navigator.mediaDevices недоступен. Возможно, требуется HTTPS или поддержка браузера."
+      );
+      setStatus("error");
+      setIsTestRunning(false);
+      return;
+    }
+
     try {
       const selectedMic = microphones.find(
         (mic) => mic.label === selectedMicrophone
@@ -233,7 +244,7 @@ function VoiceCheckModal({
 
   return (
     <ModalWrapper className="2xl:max-w-[21.111vw] max-w-[304px]">
-      <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 2xl:py-[1.667vw] py-6">
+      <div className="flex flex-col 2xl:gap-[1.667vw] gap-6">
         {/* Выбор микрофона */}
         <div className="flex flex-col items-center 2xl:gap-[0.278vw] gap-1">
           <p className="caption-xs text-[#7D7D7D] font-medium">Микрофон</p>