fix sections layout

src/client/Containers/Calculation/Sections/index.jsx

@@ -1,10 +1,12 @@
 import { Divider as AntDivider, Tabs } from 'antd';
 import Background from 'client/Elements/Background';
 import { SecondaryText } from 'client/Elements/Text';
-import { Flex } from 'client/UIKit/grid';
+import { Flex, Box } from 'client/UIKit/grid';
 import React from 'react';
 import styled from 'styled-components';
 import sectionsList from './list';
+import colors from 'client/UIKit/colors';
+import mq from 'client/UIKit/mq';
 
 const ElementTitle = styled.h5`
   color: rgba(0, 0, 0, 0.75);
@@ -18,6 +20,16 @@ const BreakLine = styled.div`
   width: 100%;
 `;
 
+const VerticalDivider = styled.div`
+  ${mq.desktop`
+  width: 1px;
+  margin: 6px 2px;
+  background: rgb(0,0,0);
+  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, rgba(0,0,0,0) 100%);
+  // background: rgba(0,0,0,0.12);
+  `}
+`;
+
 const renderElements = ({ elements }) => {
   return elements.map((element, ie) => {
     const { title: elementTitle, Component, props: elementProps } = element;
@@ -31,29 +43,38 @@ const renderElements = ({ elements }) => {
 };
 
 const renderBlocks = ({ blocks }) => {
+  if (!blocks || blocks.length === 0) {
+    return null;
+  }
   return blocks.map((block, ib) => {
     const { elements, title: blockTitle, layout } = block;
-    const breakLine = layout ? layout.breakLine : true;
-
+    const newLine = layout && layout.newLine;
     return (
       <>
-        {elements.length <= 1 && breakLine && <BreakLine />}
+        {newLine && <BreakLine />}
         <Flex
           flexDirection="column"
           key={ib}
-          flex={['1 1 100%', '1 1 100%', '2 1 45%', '3 1 30%']}
+          flex={['1 1 100%', '1 1 100%', '2 1 45%', '2 0 45%', '3 0 30%']}
+          // maxWidth={['100%', '100%', '45%', '45%', '30%']}
           mx="10px"
           my="5px"
         >
           {blockTitle && <SecondaryText>{blockTitle}</SecondaryText>}
           {renderElements({ elements })}
         </Flex>
+        {/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && (
+          <VerticalDivider />
+        )} */}
       </>
     );
   });
 };
 
 const renderGroups = ({ groups }) => {
+  if (!groups || groups.length === 0) {
+    return null;
+  }
   return groups.map((group, ig) => {
     const { title: blocksTitle, blocks } = group;
     return (

src/client/Containers/Calculation/index.jsx

@@ -7,9 +7,11 @@ const Calculation = () => {
   return (
     <Box mx={['0', '1%', '1%', '1.5%', '2%', '10%']}>
       <Flex flexWrap="wrap" mb="50px">
-        <Sections flex={['1 0 100%', '1 0 100%', '1 0 100%', '1 0 60%']} />
+        <Sections
+          flex={['1', '1', '1', '3']}
+        />
         <Results
-          flex={['1 0 100%', '1 0 100%', '1 0 100%', '1 0 30%']}
+          flex={['1', '1', '1', '1']}
           justifyContent="center"
           // position={['sticky', 'sticky', 'sticky', 'relative']}
           // bottom={[0, 0, 0, null]}

src/client/Elements/Radio.jsx

@@ -43,7 +43,11 @@ const Radio = ({ name, style, computedValue, valueName }) => {
           default:
             if (option)
               return (
-                <AntRadio key={i} value={option.value || ''}>
+                <AntRadio
+                  key={i}
+                  value={option.value || ''}
+                  style={styles.radio}
+                >
                   {option.name}
                 </AntRadio>
               );
@@ -54,4 +58,10 @@ const Radio = ({ name, style, computedValue, valueName }) => {
   );
 };
 
+const styles = {
+  radio: {
+    display: 'block',
+  },
+};
+
 export default observer(Radio);