From cc6d78935cdfcecd9fee0a694811f5bbc72488d5 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Mon, 2 Jun 2025 18:53:46 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PersonalizationAI/GenderAndAgeSelector.tsx | 18 ++++++++++--------
 .../PersonalizationAI/PersonalizationAI.tsx    |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index b79cc3c3..ef26a789 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button } from "@mui/material";
+import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
 import { useState } from "react";
@@ -16,6 +16,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
   const [gender, setGender] = useState<string>('');
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
+  const isMobile = useMediaQuery(theme.breakpoints.down(800));
 
   const isFormValid = gender && age;
 
@@ -58,11 +59,11 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: 4, alignItems: "center" }}>
-      <Box>
+    <Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
+      <Box sx={{display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial"}}>
 
         <FormControl component="fieldset" variant="standard">
-          <Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}>
+          <Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
             <FormLabel
               sx={{
                 '&.Mui-focused': {
@@ -82,7 +83,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
             sx={{
               width: "155px",
               justifyContent: "space-between",
-              mt: "9px",
+              mt: "20px",
               ml: "-9px"
             }}
             row
@@ -151,10 +152,10 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
           </RadioGroup>
         </FormControl>
 
-        <FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled">
+        <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px" }} variant="filled">
           <Box sx={{
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'end',
             gap: '4px'
           }}>
             <FormLabel sx={{
@@ -177,6 +178,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
             sx={{
               height: "48px",
               maxWidth: "420px",
+              width: "100%",
               borderRadius: "8px",
               border: "1px solid #9A9AAF",
               '& .MuiSelect-filled': {
@@ -211,7 +213,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       </Box>
 
       <Button
-      onClick={addItem}
+        onClick={addItem}
         variant="contained"
         disabled={!isFormValid}
         sx={{
diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx
index 5faa88d3..b7f6cf56 100644
--- a/src/pages/PersonalizationAI/PersonalizationAI.tsx
+++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx
@@ -98,7 +98,7 @@ export default function PersonalizationAI() {
       .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
       .join('&');
 
-    setUtmParams(paramString);
+    setUtmParams(paramString ? `&${paramString}` : "");
   };
 
   return (