From e7304a7f5140d903a2e1d5ce2013e2e37574d4bc Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Mon, 7 Sep 2020 15:27:57 +0300
Subject: [PATCH] layout UI fixes

---
 src/client/Containers/Calculation/Results/index.jsx |  7 +++++--
 .../Containers/Calculation/Sections/index.jsx       | 10 +++++-----
 src/client/Containers/Calculation/index.jsx         | 13 +++++++++----
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx
index 586388e..e435766 100644
--- a/src/client/Containers/Calculation/Results/index.jsx
+++ b/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>
 );
 
diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx
index c9f96f6..1649eed 100644
--- a/src/client/Containers/Calculation/Sections/index.jsx
+++ b/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>
diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index 3a2818b..92c1947 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/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>
   );