fix: StartPage PC and tablet design

lib/components/ViewPublicationPage/StartPageViewPublication.tsx

@@ -24,7 +24,7 @@ export const StartPageViewPublication = () => {
   const theme = useTheme();
   const { settings } = useQuizData();
   const { isMobileDevice } = useUADevice();
-  const isMobile = useRootContainerSize() < 650;
+  const isMobile = useRootContainerSize() < 700;
   const isTablet = useRootContainerSize() < 800;
 
   const handleCopyNumber = () => {
@@ -102,6 +102,7 @@ export const StartPageViewPublication = () => {
               sx={{
                 display: "flex",
                 alignItems: "center",
+                flexWrap: "wrap",
                 gap: "30px",
                 mb: "7px",
               }}
@@ -145,7 +146,7 @@ export const StartPageViewPublication = () => {
                       ? "center"
                       : "start"
                     : "start",
-                mt: "28px",
+                marginTop: "28px",
                 width: "100%",
               }}
             >
@@ -216,6 +217,7 @@ export const StartPageViewPublication = () => {
               sx={{
                 mt: "46px",
                 display: "flex",
+                flexGrow: settings.cfg.startpageType === "centered" ? 1 : 0,
                 gap: "20px",
                 alignItems: "flex-end",
                 justifyContent: "space-between",
@@ -223,12 +225,7 @@ export const StartPageViewPublication = () => {
                 flexWrap: "wrap",
               }}
             >
-              <Box
+              <Box sx={{ maxWidth: isTablet ? "240px" : "300px" }}>
-                sx={{
-                  maxWidth: isTablet ? "240px" : "300px",
-                  marginBottom: "10px",
-                }}
-              >
                 {settings.cfg.info.site && (
                   <Link mb="16px" href={settings.cfg.info.site}>
                     <Typography
@@ -323,7 +320,6 @@ export const StartPageViewPublication = () => {
                 />
                 <Typography
                   sx={{
-                    fontSize: "20px",
                     color:
                       settings.cfg.startpageType === "expanded" && !isMobile
                         ? "#F5F7FF"
@@ -360,7 +356,8 @@ function QuizPreviewLayoutByType({
   startpageType: QuizStartpageType;
   alignType: QuizStartpageAlignType;
 }) {
-  const isMobile = useRootContainerSize() < 650;
+  const isTablet = useRootContainerSize() < 1100;
+  const isMobile = useRootContainerSize() < 700;
 
   function StartPageMobile() {
     return (
@@ -379,6 +376,7 @@ function QuizPreviewLayoutByType({
           sx={{
             width: "100%",
             display: "flex",
+            flexGrow: 1,
             flexDirection: "column",
             justifyContent: "space-between",
             alignItems: "flex-start",
@@ -399,6 +397,7 @@ function QuizPreviewLayoutByType({
             sx={{
               height: "80%",
               display: "flex",
+              flexGrow: 1,
               flexDirection: "column",
               justifyContent: "space-between",
               width: "100%",
@@ -439,7 +438,6 @@ function QuizPreviewLayoutByType({
                     : "row-reverse",
                 flexGrow: 1,
                 justifyContent: isMobile ? "flex-end" : undefined,
-                height: "100%",
                 minHeight: "100vh",
                 "&::-webkit-scrollbar": { width: 0 },
                 overflow: "auto",
@@ -479,31 +477,30 @@ function QuizPreviewLayoutByType({
           {isMobile ? (
             <StartPageMobile />
           ) : (
-            <Box
+            <Box>
-              sx={{
-                overflow: "auto",
-                position: "relative",
-                display: "flex",
-                justifyContent: startpageAlignTypeToJustifyContent[alignType],
-                flexGrow: 1,
-                height: "100%",
-                "&::-webkit-scrollbar": { width: 0 },
-              }}
-            >
               <Box
                 sx={{
+                  minHeight: "100vh",
                   width: "40%",
-                  position: "relative",
                   padding: "16px",
                   zIndex: 3,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "space-between",
-                  alignItems: alignType === "center" ? "center" : "start",
                 }}
               >
-                {quizHeaderBlock}
+                <Box
-                {quizMainBlock}
+                  sx={{
+                    padding: "16px",
+                    minHeight: "calc(100vh - 32px)",
+                    position: "relative",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    alignItems: alignType === "center" ? "center" : "start",
+                    borderRight: "1px solid #9A9AAF80",
+                  }}
+                >
+                  {quizHeaderBlock}
+                  {quizMainBlock}
+                </Box>
               </Box>
               <Box
                 sx={{
@@ -535,9 +532,8 @@ function QuizPreviewLayoutByType({
                 padding: "16px",
                 display: "flex",
                 flexDirection: "column",
-                justifyContent: "space-between",
                 alignItems: "center",
-                height: "100%",
+                minHeight: "100vh",
                 "&::-webkit-scrollbar": { width: 0 },
               }}
             >
@@ -545,11 +541,12 @@ function QuizPreviewLayoutByType({
               {backgroundBlock && (
                 <Box
                   sx={{
-                    width: "60%",
+                    width: "100%",
-                    height: "275px",
+                    maxWidth: "844px",
-                    // overflow: "hidden",
+                    height: isTablet ? "530px" : "306px",
                     display: "flex",
                     justifyContent: "center",
+                    "& > img": { width: "100%", borderRadius: "12px" },
                   }}
                 >
                   {backgroundBlock}