From d966d65a5f2667fc832dbee1c2d48497e4617522 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Sat, 14 Nov 2020 15:39:38 +0300
Subject: [PATCH] ui fixes #3

---
 .../Calculation/Sections/sectionsList.ts      | 25 ++++++-------------
 src/client/Containers/Calculation/index.jsx   | 23 ++++++++---------
 .../Calculation/lib/renderSections.js         |  6 +++--
 3 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/client/Containers/Calculation/Sections/sectionsList.ts b/src/client/Containers/Calculation/Sections/sectionsList.ts
index f447802..ad7cc1c 100644
--- a/src/client/Containers/Calculation/Sections/sectionsList.ts
+++ b/src/client/Containers/Calculation/Sections/sectionsList.ts
@@ -38,9 +38,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
           {
             elements: [
@@ -55,9 +52,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
           {
             elements: [
@@ -72,9 +66,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
           {
             elements: [
@@ -270,6 +261,9 @@ const sections: ISection[] = [
                 },
               },
             ],
+            layout: {
+              newLine: true,
+            },
           },
 
           {
@@ -310,9 +304,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
           {
             elements: [
@@ -325,9 +316,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
           {
             elements: [
@@ -340,9 +328,6 @@ const sections: ISection[] = [
                 },
               },
             ],
-            layout: {
-              width: '30%',
-            },
           },
         ],
       },
@@ -602,6 +587,7 @@ const sections: ISection[] = [
             ],
             layout: {
               newLine: true,
+              width: '100%',
             },
           },
         ],
@@ -1369,6 +1355,9 @@ const sections: ISection[] = [
                 },
               },
             ],
+            layout: {
+              width: '100%',
+            },
           },
         ],
       },
diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index e3261de..0aea0cb 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/src/client/Containers/Calculation/index.jsx
@@ -33,19 +33,16 @@ const Calculation = () => {
   const ModalComponent = withStoreModal(Modal);
 
   return (
-    <Box mx={['0', '1%', '1%', '1.5%', '2%', '10%']}>
-      <Flex
-        mb="50px"
-        flexWrap={['wrap', 'wrap', 'wrap', 'nowrap']}
-        justifyContent="center"
-      >
-        <Sections
-          width={['100%', '100%', '100%', '700px', '900px', '1200px']}
-        />
-        <Results width={['100%', '100%', '100%', '500px', '600px']} />
-        <ModalComponent />
-      </Flex>
-    </Box>
+    <Flex
+      mx={[0, 0, 0, 0, '7%']}
+      mb="50px"
+      flexWrap={['wrap', 'wrap', 'wrap', 'nowrap']}
+      justifyContent="center"
+    >
+      <Sections width={['100%', '100%', '100%', '700px', '900px', '1200px']} />
+      <Results width={['100%', '100%', '100%', '500px', '600px']} />
+      <ModalComponent />
+    </Flex>
   );
 };
 
diff --git a/src/client/Containers/Calculation/lib/renderSections.js b/src/client/Containers/Calculation/lib/renderSections.js
index 6d0b3a5..1bbb23f 100644
--- a/src/client/Containers/Calculation/lib/renderSections.js
+++ b/src/client/Containers/Calculation/lib/renderSections.js
@@ -22,7 +22,7 @@ const renderElements = ({ elements }) => {
   return elements.map(({ title: elementTitle, ...element }, ie) => {
     const Component = buildElement(element);
     return (
-      <Flex flexDirection="column" key={ie}>
+      <Flex flexDirection="column" key={ie} width="100%">
         <ElementTitle>{elementTitle}</ElementTitle>
         <Component />
       </Flex>
@@ -37,12 +37,13 @@ const renderBlocks = ({ blocks }) => {
   return blocks.map((block, ib) => {
     const { elements, title: blockTitle, layout } = block;
     const newLine = layout && layout.newLine;
-    const width = (layout && layout.width) || '45%';
+    const width = (layout && layout.width) || '33%';
     return (
       <React.Fragment key={ib}>
         {newLine && <BreakLine />}
         <Flex
           flexDirection="column"
+          flexWrap="nowrap"
           flex={[
             '1 1 100%',
             '1 1 100%',
@@ -51,6 +52,7 @@ const renderBlocks = ({ blocks }) => {
             `2 0 ${width}`,
             '3 0 30%',
           ]}
+          width={['100%', '100%', width]}
           mx="10px"
         >
           {blockTitle && (