селектор для мобилки

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={{

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 (