From 77e1eba874e4ee966d3e8177de0b446fd8723fce Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Tue, 26 Dec 2023 02:02:16 +0300
Subject: [PATCH] style ModalSizeImage

---
 src/pages/startPage/ModalSizeImage.tsx | 60 ++++++++++++++------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/pages/startPage/ModalSizeImage.tsx b/src/pages/startPage/ModalSizeImage.tsx
index 3b95af67..269d928e 100644
--- a/src/pages/startPage/ModalSizeImage.tsx
+++ b/src/pages/startPage/ModalSizeImage.tsx
@@ -42,7 +42,7 @@ export default function ModalSizeImage() {
     createData("Варианты и картинка", "380х307 px"),
     createData("Консультант", "140х140 px"),
     createData("Логотип", "107х37 px"),
-    createData("", "1100х600 px"),
+    createData("Результаты", "1100х600 px"),
     createData("Бонус", "200х60 px"),
     createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
   ];
@@ -100,12 +100,8 @@ export default function ModalSizeImage() {
             </IconButton>
           </Box>
           <Box sx={{ padding: "15px 20px 0px" }}>
-            <Typography
-              variant={"body2"}
-              sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}
-            >
-              Рекомендованный размер зависит от того, как вы будете чаще
-              использовать квиз:
+            <Typography variant={"body2"} sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}>
+              Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:
             </Typography>
           </Box>
           <Box sx={{ padding: "15px 40px 30px" }}>
@@ -115,24 +111,29 @@ export default function ModalSizeImage() {
                 sx={{
                   display: "flex",
                   justifyContent: "space-between",
+                  position: "relative",
                   width: "100%",
                   paddingBottom: "5px",
                 }}
               >
-                <Box sx={{ display: "block ruby", height: "20px" }}>
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 18,
+                    left: 0,
+                    right: 0,
+                    borderBottom: "solid 1px #F2F3F7",
+                  }}
+                />
+                <Box sx={{ display: "block ruby", position: "relative", zIndex: 1, background: "white" }}>
                   <Typography variant={"body2"} fontWeight={400}>
                     {name}
                   </Typography>
                 </Box>
-                <Box
-                  sx={{
-                    borderBottom: "solid 1px #F2F3F7",
-                    width: "100%",
-                    margin: "0 7px",
-                  }}
-                ></Box>
-                <Box sx={{ display: "block ruby", height: "20px" }}>
-                  <Typography variant={"body2"}>{size}</Typography>
+                <Box sx={{ display: "block ruby", position: "relative", zIndex: 1, background: "white" }}>
+                  <Typography sx={{ whiteSpace: "nowrap" }} variant={"body2"}>
+                    {size}
+                  </Typography>
                 </Box>
               </Box>
             ))}
@@ -153,24 +154,29 @@ export default function ModalSizeImage() {
                 sx={{
                   display: "flex",
                   justifyContent: "space-between",
+                  position: "relative",
                   width: "100%",
                   paddingBottom: "5px",
                 }}
               >
-                <Box sx={{ display: "block ruby", height: "20px" }}>
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 18,
+                    left: 0,
+                    right: 0,
+                    borderBottom: "solid 1px #F2F3F7",
+                  }}
+                />
+                <Box sx={{ display: "block ruby", position: "relative", zIndex: 1, background: "white" }}>
                   <Typography variant={"body2"} fontWeight={400}>
                     {name}
                   </Typography>
                 </Box>
-                <Box
-                  sx={{
-                    borderBottom: "solid 1px #F2F3F7",
-                    width: "100%",
-                    margin: "0 7px",
-                  }}
-                ></Box>
-                <Box sx={{ display: "block ruby", height: "20px" }}>
-                  <Typography variant={"body2"}>{size}</Typography>
+                <Box sx={{ display: "block ruby", position: "relative", zIndex: 1, background: "white" }}>
+                  <Typography sx={{ whiteSpace: "nowrap" }} variant={"body2"}>
+                    {size}
+                  </Typography>
                 </Box>
               </Box>
             ))}