layout UI fixes

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

@@ -3,13 +3,16 @@ import Background from 'client/Elements/Background';
 import { SecondaryText } from 'client/Elements/Text';
 import Title from 'client/Elements/Title';
 import React from 'react';
+import { Flex } from 'client/UIKit/grid';
 
 const Results = props => (
-  <Background flex="1 0 20%" justifyContent="center">
+  <Background {...props}>
     <SecondaryText>Расчет осуществляется по Интересу:</SecondaryText>
     <SecondaryText>Лизинговой сделке:</SecondaryText>
     <Divider style={styles.divider} />
-    <Title text="Результаты" />
+    <Flex justifyContent="center">
+      <Title text="Результаты" />
+    </Flex>
   </Background>
 );
 

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

@@ -12,8 +12,8 @@ const { TabPane } = Tabs;
 const InputWrapper = styled(Box)`
   width: 100%;
   ${mq.desktop`
-    flex: ${(props) => (props.size === 'min' ? '1 0' : '2 0 23%')};
-    width:${(props) => props.size === 'max' && '100%'};
+    flex: ${props => (props.size === 'min' ? '1 0' : '2 0 23%')};
+    width:${props => props.size === 'max' && '100%'};
     `}
   margin: 8px 8px;
 `;
@@ -25,8 +25,8 @@ const Title = styled.h5`
   margin: 0 8px 3px 0;
 `;
 
-const Sections = () => (
-  <Background flex="3 0 65%">
+const Sections = props => (
+  <Background {...props}>
     <Tabs type="line">
       {SectionsList.map(({ title, elements }, i) => (
         <TabPane tab={title} key={i}>
@@ -57,7 +57,7 @@ const Sections = () => (
                     </Flex>
                   </InputWrapper>
                 );
-              }
+              },
             )}
           </Flex>
         </TabPane>

src/client/Containers/Calculation/index.jsx

@@ -1,14 +1,19 @@
 import { Box, Flex } from 'client/UIKit/grid';
 import React from 'react';
 import Results from './Results';
-import SectionsList from './Sections';
+import Sections from './Sections';
 
 const Calculation = () => {
   return (
-    <Box mx={['0', '1%', '1%', '10%']}>
+    <Box mx={['0', '1%', '1%', '1.5%', '10%']}>
       <Flex flexWrap="wrap" mb="50px">
-        <SectionsList />
-        <Results />
+        <Sections flex="3 0 65%" />
+        <Results
+          flex="1 0 20%"
+          justifyContent="center"
+          // position={['sticky', 'sticky', 'sticky', 'relative']}
+          // bottom={[0, 0, 0, null]}
+        />
       </Flex>
     </Box>
   );