основные окна настроек адаптивны

src/components/CustomRadioGroup/CustomRadioGroup.tsx

@@ -106,7 +106,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
         border: `1px solid ${theme.palette.grey2.main}`,
         borderRadius: "12px",
         padding: "5px",
-        height: "305px",
+        maxHeight: "305px",
         overflowY: "auto",
       }}
     >

src/components/CustomSelect/CustomSelect.tsx

@@ -93,7 +93,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({ items, selectedItemId, set
   }, [items, selectedItemId]);
 
   return (
-    <Box>
+    <Box mt={"20px"}>
       <Box
         sx={{
           zIndex: 3,

src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx

@@ -7,9 +7,10 @@ import AccountSetting from "@icons/AccountSetting";
 type AmoAccountInfoProps = {
   handleNextStep: () => void;
   accountInfo: AccountResponse | null;
+  toChangeAccount: () => void;
 };
 
-export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo }) => {
+export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo, toChangeAccount }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
@@ -135,7 +136,7 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
               width={"20px"}
             />
           }
-          onClick={() => { }}
+          onClick={toChangeAccount}
           sx={{
             height: "44px",
             padding: "0",

src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx

@@ -34,19 +34,20 @@ export const DealPerformers: FC<Props> = ({
 
   return (
     <>
-    <ModalTitle
-    {...titleProps}
-    />
     <Box
       sx={{
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         height: "100%",
+        overflow: "auto",
         flexGrow: 1,
       }}
     >
-      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
+      <Box sx={{ width: "100%", zIndex: 3 }}>
+    <ModalTitle
+    {...titleProps}
+    />
         <CustomSelect
           items={users}
           selectedItemId={selectedDealUser}

src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx

@@ -21,7 +21,7 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   return (
-    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+    <Box sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
       <Box>
         <Typography
           sx={{
@@ -39,39 +39,44 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
             sx={{
               color: "#4D4D4D",
               fontSize: "16px",
-              m: "5px 0 15px 0"
+              m: "5px 0 15px 0",
+              whiteSpace: "break-spaces",
+              width: "90%"
             }}
           >
             {desc}
           </Typography>
         }
-          <Typography
+        <Typography
-            sx={{
+          sx={{
-              color: theme.palette.grey2.main,
+            color: theme.palette.grey2.main,
-              fontWeight: "400",
+            fontWeight: "400",
-              marginTop: "4px",
+            marginTop: "4px",
-              fontSize: "14px",
+            fontSize: "14px",
-              lineHeight: "1",
+            lineHeight: "1",
-            }}
+          }}
-          >
+        >
-            {step} шаг
+          {step} шаг
-          </Typography>
+        </Typography>
       </Box>
 
+
+      <Box>
         <Button
           variant="outlined"
           startIcon={
             <GearIcon
-                color={theme.palette.brightPurple.main}
+              color={theme.palette.brightPurple.main}
-                height={"24px"}
+              height={"24px"}
-                width={"24px"}
+              width={"24px"}
-              />
+            />
           }
           onClick={toSettings}
           sx={{
             height: "44px",
-            padding: isMobile ? "10px" : "10px 20px",
+            padding: "0",
-            width: "fit-content",
+            width: isMobile ? "44px" : "205px",
+            minWidth: isMobile ? "44px" : "auto",
             backgroundColor: "transparent",
             color: theme.palette.brightPurple.main,
             "& .MuiButton-startIcon": {
@@ -102,6 +107,7 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
         >
           {isMobile ? "" : "Мои настройки"}
         </Button>
+      </Box>
     </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx

@@ -44,53 +44,60 @@ export const PipelineSteps: FC<Props> = ({
 
   return (
     <>
-    <ModalTitle
-    {...titleProps}
-    />
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        height: "100%",
-        flexGrow: 1,
-      }}
-    >
-      <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
-        <CustomSelect
-          items={users}
-          selectedItemId={selectedDealUser}
-          setSelectedItem={setSelectedDealPerformer}
-          handleScroll={() => {}}
-        />
-      </Box>
       <Box
         sx={{
-          marginTop: "20px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          height: "100%",
+          overflow: "auto",
           flexGrow: 1,
+        }}
+      >
+        <Box
+          sx={{
+            height: "100%",
+            overflow: "auto",
+            zIndex: 3,
           width: "100%",
-          height: "346px",
+          }}>
-        }}
+          <Box sx={{ width: "100%", zIndex: 3 }}>
-      >
+            <ModalTitle
-        <CustomRadioGroup
+              {...titleProps}
-          items={steps}
+            />
-          selectedItemId={selectedStep}
+            <CustomSelect
-          setSelectedItem={setSelectedStep}
+              items={users}
-          handleScroll={() => {}}
+              selectedItemId={selectedDealUser}
-        />
+              setSelectedItem={setSelectedDealPerformer}
+              handleScroll={() => { }}
+            />
+          </Box>
+          <Box
+            sx={{
+              marginTop: "13px",
+              flexGrow: 1,
+              width: "100%",
+            }}
+          >
+            <CustomRadioGroup
+              items={steps}
+              selectedItemId={selectedStep}
+              setSelectedItem={setSelectedStep}
+              handleScroll={() => { }}
+            />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            alignSelf: "end",
+          }}
+        >
+          <StepButtonsBlock
+            onLargeBtnClick={handleNextStep}
+            onSmallBtnClick={handlePrevStep}
+          />
+        </Box>
       </Box>
-      <Box
-        sx={{
-          marginTop: "20px",
-          alignSelf: "end",
-        }}
-      >
-        <StepButtonsBlock
-          onLargeBtnClick={handleNextStep}
-          onSmallBtnClick={handlePrevStep}
-        />
-      </Box>
-    </Box>
     </>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx

@@ -42,44 +42,51 @@ export const Pipelines: FC<Props> = ({
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   return (
     <>
-      <ModalTitle
-      {...titleProps}
-      />
       <Box
         sx={{
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           height: "100%",
+          overflow: "auto",
           flexGrow: 1,
         }}
       >
-        <Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
-          <CustomSelect
-            items={users}
-            selectedItemId={selectedDealUser}
-            setSelectedItem={setSelectedDealPerformer}
-            handleScroll={() => { }}
-          />
-        </Box>
         <Box
           sx={{
-            marginTop: "20px",
+            height: "100%",
-            flexGrow: 1,
+            overflow: "auto",
+            zIndex: 3,
             width: "100%",
-            height: "346px",
+          }}>
-          }}
+          <Box sx={{ width: "100%", zIndex: 3 }}>
-        >
+            <ModalTitle
-          <CustomRadioGroup
+              {...titleProps}
-            items={pipelines}
+            />
-            selectedItemId={selectedPipeline}
+            <CustomSelect
-            setSelectedItem={setSelectedPipeline}
+              items={users}
-            handleScroll={() => { }}
+              selectedItemId={selectedDealUser}
-          />
+              setSelectedItem={setSelectedDealPerformer}
+              handleScroll={() => { }}
+            />
+          </Box>
+          <Box
+            sx={{
+              marginTop: "13px",
+              flexGrow: 1,
+              width: "100%",
+            }}
+          >
+            <CustomRadioGroup
+              items={pipelines}
+              selectedItemId={selectedPipeline}
+              setSelectedItem={setSelectedPipeline}
+              handleScroll={() => { }}
+            />
+          </Box>
         </Box>
         <Box
           sx={{
-            marginTop: "20px",
             alignSelf: "end",
           }}
         >

src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx

@@ -7,6 +7,7 @@ import { EntitiesQuestions } from "./EntitiesQuestions";
 import { diffArr } from "..";
 import { DataConstrictor } from "../Components/DataConstrictor";
 import { ModalTitle } from "../ModalTitle";
+import { StepButtonsBlock } from "../StepButtonsBlock";
 
 type Props = {
   selectedCurrentFields: MinifiedData[] | [];
@@ -132,66 +133,83 @@ export const AmoQuestions: FC<Props> = ({
   }, [activeScope])
   return (
     <>
-    <ModalTitle
+      <Box
-      {...titleProps}
+        sx={{
-      desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
+          height: "calc( 100% - 70px )",
-    />
+          overflow: "auto"
-    <Box
+        }}
-      sx={{
+      >
-        display: "flex",
+        <ModalTitle
-        flexDirection: "column",
+          {...titleProps}
-        height: "100%",
+          desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
-        flexGrow: 1,
-      }}
-    >
-      {isSelection && activeScope !== null ? (
-        // Здесь выбираем элемент в табличку
-        <>
-          <DataConstrictor
-            isError={false}
-            constrictor={startConstrictor}
-          />
-          <EntitiesQuestions
-            FieldsAllowedFC={sortedFieldsAllowedFC}
-            fieldsItems={sortedFieldsItems}
-            items={(sortedquestionsItems.length === 0) ? [] : diffArr(sortedquestionsItems, selectedQuestions[activeScope])}
-            selectedItemId={selectedQuestion}
-            setSelectedQuestion={setSelectedQuestion}
-            selectedField={selectedField}
-            selectedCurrentFields={selectedCurrentFields}
-            setSelectedField={setSelectedField}
-            onSmallBtnClick={() => {
-              setActiveScope(null);
-              setIsSelection(false);
-            }}
-            onLargeBtnClick={() => {
-              handleAdd();
-              setActiveScope(null);
-              setIsSelection(false);
-            }}
-            activeScope={activeScope}
-            setIsCurrentFields={setIsCurrentFields}
-            isCurrentFields={isCurrentFields}
-          />
-        </>
-      ) : (
-        // Табличка
-        <ItemDetailsView
-          items={[...questionsItems, ...FieldsAllowedFC]}
-          setActiveScope={setActiveScope}
-          selectedQuestions={{
-            Lead: [...selectedQuestions.Lead, ...SCFworld.Lead],
-            Company: [...selectedQuestions.Company, ...SCFworld.Company],
-            Customer: [...selectedQuestions.Customer, ...SCFworld.Customer],
-            Contact: [...selectedQuestions.Contact, ...SCFworld.Contact]
-          }}
-          setIsSelection={setIsSelection}
-          handleLargeBtn={handleNextStep}
-          handleSmallBtn={handlePrevStep}
-          deleteHC={handleDelete}
         />
-      )}
+        <Box
-    </Box>
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            flexGrow: 1,
+          }}
+        >
+          {isSelection && activeScope !== null ? (
+            // Здесь выбираем элемент в табличку
+            <>
+              <DataConstrictor
+                isError={false}
+                constrictor={startConstrictor}
+              />
+              <EntitiesQuestions
+                FieldsAllowedFC={sortedFieldsAllowedFC}
+                fieldsItems={sortedFieldsItems}
+                items={(sortedquestionsItems.length === 0) ? [] : diffArr(sortedquestionsItems, selectedQuestions[activeScope])}
+                selectedItemId={selectedQuestion}
+                setSelectedQuestion={setSelectedQuestion}
+                selectedField={selectedField}
+                selectedCurrentFields={selectedCurrentFields}
+                setSelectedField={setSelectedField}
+                onSmallBtnClick={() => {
+                  setActiveScope(null);
+                  setIsSelection(false);
+                }}
+                onLargeBtnClick={() => {
+                  handleAdd();
+                  setActiveScope(null);
+                  setIsSelection(false);
+                }}
+                activeScope={activeScope}
+                setIsCurrentFields={setIsCurrentFields}
+                isCurrentFields={isCurrentFields}
+              />
+            </>
+          ) : (
+            // Табличка
+            <ItemDetailsView
+              items={[...questionsItems, ...FieldsAllowedFC]}
+              setActiveScope={setActiveScope}
+              selectedQuestions={{
+                Lead: [...selectedQuestions.Lead, ...SCFworld.Lead],
+                Company: [...selectedQuestions.Company, ...SCFworld.Company],
+                Customer: [...selectedQuestions.Customer, ...SCFworld.Customer],
+                Contact: [...selectedQuestions.Contact, ...SCFworld.Contact]
+              }}
+              setIsSelection={setIsSelection}
+              deleteHC={handleDelete}
+            />
+          )}
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          alignSelf: "end",
+        }}
+      >
+        <StepButtonsBlock
+          onSmallBtnClick={handlePrevStep}
+          onLargeBtnClick={handleNextStep}
+          largeBtnText={"Сохранить"}
+        />
+      </Box>
     </>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx

@@ -9,8 +9,6 @@ type TitleKeys = "Contact" | "Company" | "Lead" | "Customer";
 type ItemDetailsViewProps = {
   items: MinifiedData[];
   setIsSelection: (value: boolean) => void;
-  handleSmallBtn: () => void;
-  handleLargeBtn: () => void;
   selectedQuestions: SelectedQuestions;
   setActiveScope: (value: QuestionKeys | null) => void;
   deleteHC: (id: string, scope: QuestionKeys) => void;
@@ -18,8 +16,6 @@ type ItemDetailsViewProps = {
 
 export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
   items,
-  handleSmallBtn,
-  handleLargeBtn,
   selectedQuestions,
   setIsSelection,
   setActiveScope,
@@ -68,18 +64,6 @@ export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
           ))}
       </Box>
 
-      <Box
-        sx={{
-          marginTop: "20px",
-          alignSelf: "end",
-        }}
-      >
-        <StepButtonsBlock
-          onSmallBtnClick={handleSmallBtn}
-          onLargeBtnClick={handleLargeBtn}
-          largeBtnText={"Сохранить"}
-        />
-      </Box>
     </Box>
   );
 };

src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx

@@ -9,8 +9,7 @@ import { SelectedQuestions, SelectedTags } from "../../types";
 type SettingItemProps = {
   step: number;
   title: string;
-  setStep: (value: number) => void;
+  setStep: (step: number) => void;
-  setIsSettingsBlock: (value: boolean) => void;
   selectedFunnelPerformer: string | null;
   selectedFunnel: string | null;
   selectedStagePerformer: string | null;
@@ -24,7 +23,6 @@ export const SettingItem: FC<SettingItemProps> = ({
   step,
   title,
   setStep,
-  setIsSettingsBlock,
   selectedFunnelPerformer,
   selectedFunnel,
   selectedStagePerformer,
@@ -34,6 +32,7 @@ export const SettingItem: FC<SettingItemProps> = ({
   selectedTags,
 }) => {
   const theme = useTheme();
+  console.log(step)
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   if (step === 0) {
     return;
@@ -146,8 +145,7 @@ export const SettingItem: FC<SettingItemProps> = ({
       <SettingItemHeader
         title={title}
         step={step}
-        setIsSettingsBlock={setIsSettingsBlock}
+        setStep={() => setStep(step)}
-        setStep={setStep}
       />
       <Box>{SettingsContent}</Box>
     </Box>

src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx

@@ -6,23 +6,16 @@ import { FC } from "react";
 type SettingItemHeaderProps = {
   title: string;
   step: number;
-  setStep: (value: number) => void;
+  setStep: () => void;
-  setIsSettingsBlock: (value: boolean) => void;
 };
 
 export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
   title,
   step,
   setStep,
-  setIsSettingsBlock,
 }) => {
   const theme = useTheme();
 
-  const handleClick = () => {
-    setStep(step);
-    setIsSettingsBlock(false);
-  };
-
   return (
     <Box>
       <Box
@@ -41,7 +34,7 @@ export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
         >
           {step} этап
         </Typography>
-        <IconButton onClick={handleClick}>
+        <IconButton onClick={setStep}>
           <EditPencil
             color={theme.palette.brightPurple.main}
             width={"18px"}

src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx

@@ -1,49 +1,59 @@
 import { FC } from "react";
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { StepButtonsBlock } from "../StepButtonsBlock";
 import { SettingItem } from "./SettingItem/SettingItem";
 import { SelectedQuestions, SelectedTags } from "../types";
 
 type AmoSettingsBlockProps = {
   stepTitles: string[];
-  setStep: (value: number) => void;
-  setIsSettingsBlock: (value: boolean) => void;
   selectedFunnel: string | null;
   selectedStage: string | null;
   selectedDealUser: string | null;
   selectedQuestions: SelectedQuestions;
   selectedTags: SelectedTags;
+  toBack: () => void
+  setStep: (step: number) => void
 };
 
 export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
   stepTitles,
-  setStep,
-  setIsSettingsBlock,
   selectedFunnel,
   selectedDealUser,
   selectedStage,
   selectedQuestions,
   selectedTags,
+  toBack,
+  setStep,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   return (
-    <Box sx={{ flexGrow: 1, width: "100%" }}>
+    <Box sx={{ flexGrow: 1, width: "100%", height: "100%"}}>
       <Box
         sx={{
           display: "flex",
           flexDirection: "column",
-          alignItems: "center",
           height: "100%",
           flexGrow: 1,
         }}
       >
+        <Typography
+          sx={{
+            fontSize: "24px",
+            fontWeight: 500,
+            lineHeight: "28.44px"
+
+          }}
+        >
+          Мои настройки
+        </Typography>
         <Box
           sx={{
-            marginTop: "10px",
+            marginTop: "20px",
             width: "100%",
-            height: "443px",
+            minHheight: "440px",
+            maxHeight: "90%",
             borderRadius: "10px",
             padding: " 0 20px",
             boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
@@ -54,26 +64,25 @@ export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
           {stepTitles &&
             stepTitles.map((title, index) => (
               <SettingItem
-                step={index}
+                step={index+1}
                 title={title}
-                setIsSettingsBlock={setIsSettingsBlock}
-                setStep={setStep}
                 selectedDealUser={selectedDealUser}
                 selectedFunnel={selectedFunnel}
                 selectedStage={selectedStage}
                 selectedQuestions={selectedQuestions}
                 selectedTags={selectedTags}
+
+                setStep={setStep}
               />
             ))}
         </Box>
         <Box
           sx={{
-            marginTop: "20px",
             alignSelf: "end",
           }}
         >
           <StepButtonsBlock
-            onSmallBtnClick={() => setIsSettingsBlock(false)}
+            onSmallBtnClick={toBack}
             isLargeBtnMissing={true}
           />
         </Box>

src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx

@@ -90,7 +90,7 @@ export const SwitchPages = ({
   handleCloseModal,
 }: Props) => {
   const [step, setStep] = useState(0)
-  const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo")
+  const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">(accountInfo ? "accountInfo" : "amoLogin")
   const [openDelete, setOpenDelete] = useState<TagQuestionHC | null>(null);
 
 
@@ -226,6 +226,8 @@ export const SwitchPages = ({
     }
     body.FieldsRule = FieldsRule;
 
+    console.log(body)
+
     //  if (firstRules) {
     //    setIntegrationRules(quiz.backendId.toString(), body);
     //  } else {
@@ -353,14 +355,12 @@ export const SwitchPages = ({
       />
     case "removeAccount":
       return <RemoveAccount
-        handleCloseModal={closeSpecialPage}
+        handleCloseModal={handleCloseModal}
         stopThisPage={closeSpecialPage}
       />
     case "settingsBlock":
       return <SettingsBlock
         stepTitles={stepTitles}
-        setIsSettingsBlock={setIsSettingsBlock}
-        setStep={setStep}
         selectedDealUser={arrayOfUsers.find((u) => u.id === selectedDealUser)?.title || "не указан"}
         selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"}
         selectedStage={
@@ -368,15 +368,26 @@ export const SwitchPages = ({
         }
         selectedQuestions={selectedQuestions}
         selectedTags={selectedTags}
+        toBack={() => closeSpecialPage()}
+        setStep={(step: number) => {
+          closeSpecialPage()
+          setStep(step)
+        }}
       />
     case "amoLogin": return <AmoLogin handleNextStep={handleNextStep} />
     case "accountInfo": return <AccountInfo
-      handleNextStep={() => setSpecialPage("")}
+      handleNextStep={() => closeSpecialPage()}
       accountInfo={accountInfo}
+      toChangeAccount={() => setSpecialPage("removeAccount")}
     />
 
 
-    default: return <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
+    default: return <Box sx={{
+      flexGrow: 1,
+      width: "100%",
+      height: "100%",
+      overflow: "auto"
+    }}>{steps[step].component}</Box>
   }
 }
 

src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx

@@ -5,6 +5,7 @@ import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
 import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types";
 import { DataConstrictor } from "../Components/DataConstrictor";
 import { ModalTitle } from "../ModalTitle";
+import { StepButtonsBlock } from "../StepButtonsBlock";
 
 type Props = {
   tagsItems: MinifiedData[] | [];
@@ -57,53 +58,67 @@ export const AmoTags: FC<Props> = ({
 
   return (
     <>
-      <ModalTitle
+      <Box
-        {...titleProps}
+      sx={{
-      />
+        height: "calc( 100% - 70px )",
+        overflow: "auto"
+      }}
+      >
+          <ModalTitle
+            {...titleProps}
+          />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+          }}
+        >
+          {isSelection && activeScope !== null ? (
+            // Здесь выбираем элемент в табличку
+            <>
+              <DataConstrictor
+                isError={sortedTagsItems.length === 0}
+                constrictor={startConstrictor}
+              />
+              <ItemsSelectionView
+                items={sortedTagsItems}
+                selectedItemId={selectedTag}
+                setSelectedItem={setSelectedTag}
+                handleScroll={handleScroll}
+                activeScope={activeScope}
+                onSmallBtnClick={() => {
+                  setActiveScope(null);
+                  setIsSelection(false);
+                }}
+                onLargeBtnClick={() => {
+                  handleAdd();
+                  setActiveScope(null);
+                  setIsSelection(false);
+                }}
+              />
+            </>
+          ) : (
+            // Табличка
+            <TagsDetailsView
+              items={tagsItems}
+              setActiveScope={setActiveScope}
+              selectedTags={selectedTags}
+              setIsSelection={setIsSelection}
+              deleteHC={handleDelete}
+            />
+          )}
+        </Box>
+      </Box>
       <Box
         sx={{
-          display: "flex",
+          alignSelf: "end",
-          flexDirection: "column",
-          height: "100%",
-          flexGrow: 1,
         }}
       >
-        {isSelection && activeScope !== null ? (
+        <StepButtonsBlock
-          // Здесь выбираем элемент в табличку
+          onSmallBtnClick={handlePrevStep}
-          <>
+          onLargeBtnClick={handleNextStep}
-            <DataConstrictor
+        />
-              isError={sortedTagsItems.length === 0}
-              constrictor={startConstrictor}
-            />
-            <ItemsSelectionView
-              items={sortedTagsItems}
-              selectedItemId={selectedTag}
-              setSelectedItem={setSelectedTag}
-              handleScroll={handleScroll}
-              activeScope={activeScope}
-              onSmallBtnClick={() => {
-                setActiveScope(null);
-                setIsSelection(false);
-              }}
-              onLargeBtnClick={() => {
-                handleAdd();
-                setActiveScope(null);
-                setIsSelection(false);
-              }}
-            />
-          </>
-        ) : (
-          // Табличка
-          <TagsDetailsView
-            items={tagsItems}
-            setActiveScope={setActiveScope}
-            selectedTags={selectedTags}
-            setIsSelection={setIsSelection}
-            handleNextStep={handleNextStep}
-            handlePrevStep={handlePrevStep}
-            deleteHC={handleDelete}
-          />
-        )}
       </Box>
     </>
   );

src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx

@@ -7,8 +7,6 @@ import { MinifiedData, SelectedTags, TagKeys } from "../../types";
 type TagsDetailsViewProps = {
   items: MinifiedData[];
   setIsSelection: (value: boolean) => void;
-  handlePrevStep: () => void;
-  handleNextStep: () => void;
   setActiveScope: (value: TagKeys | null) => void;
   selectedTags: SelectedTags;
   deleteHC: (id: string, scope: TagKeys) => void;
@@ -19,8 +17,6 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
   setActiveScope,
   selectedTags,
   setIsSelection,
-  handlePrevStep,
-  handleNextStep,
   deleteHC,
 }) => {
   const theme = useTheme();
@@ -30,7 +26,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
   return (
     <Box
       sx={{
-        marginTop: "20px",
+        marginTop: "15px",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -41,7 +37,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
       <Box
         sx={{
           width: "100%",
-          height: "400px",
+          maxHeight: "380px",
           flexGrow: 1,
           borderRadius: "10px",
           padding: "10px",
@@ -88,17 +84,6 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
             ))}
         </Box>
       </Box>
-      <Box
-        sx={{
-          marginTop: "20px",
-          alignSelf: "end",
-        }}
-      >
-        <StepButtonsBlock
-          onSmallBtnClick={handlePrevStep}
-          onLargeBtnClick={handleNextStep}
-        />
-      </Box>
     </Box>
   );
 };