ui fixes #3

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%',
+            },
           },
         ],
       },

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>
   );
 };
 

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 && (