смена положения блоков формы контактов при увеличении количества полей

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -76,7 +76,7 @@ export const ContactForm = ({
   const mode = modes;
   const { questions } = useQuestionsStore();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isMobile = useMediaQuery(theme.breakpoints.down(850));
   const [ready, setReady] = useState(false);
   const followNextForm = () => {
     setShowContactForm(false);
@@ -98,6 +98,18 @@ export const ContactForm = ({
     }
   });
 
+  let FCcopy: any = quiz?.config.formContact.fields;
+  let filteredFC = {};
+  for (let i in FCcopy) {
+    let field = FCcopy[i];
+
+    if (field.used) {
+      filteredFC[i] = field;
+    }
+  }
+  let isWide = Object.keys(filteredFC).length > 2;
+  console.log(isWide);
+
   return (
     <Box
       sx={{
@@ -106,17 +118,27 @@ export const ContactForm = ({
         justifyContent: "center",
         backgroundColor: theme.palette.background.default,
         height: "100vh",
+        overflow: "auto",
       }}
     >
       <Box
         sx={{
-          width: isMobile ? "330px" : "530px",
+          width: isWide && !isMobile ? "100%" : isMobile ? undefined : "530px",
           borderRadius: "4px",
-          overflow: "auto",
           height: "90vh",
+          display: isWide && !isMobile ? "flex" : undefined,
         }}
       >
-        <Box>
+        <Box
+          sx={{
+            width: isWide && !isMobile ? "100%" : undefined,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRight: isWide && !isMobile ? "1px solid gray" : undefined,
+          }}
+        >
           <Typography
             sx={{
               textAlign: "center",

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -75,6 +75,7 @@ export const ResultForm = ({
         height: isMobile ? undefined : "100vh",
         width: "100vw",
         pt: "28px",
+        overflow: "auto",
       }}
     >
       <Box