Calculation: improve layout

Components/Calculation/Form/index.jsx

@@ -1,5 +1,7 @@
 import Background from 'Elements/layout/Background';
-import { Tabs, Wrapper } from 'Elements/layout/Tabs';
+import Tabs from 'Elements/layout/Tabs';
+import styled from 'styled-components';
+import { min } from 'UIKit/mq';
 import AddProduct from './AddProduct';
 import CreateKP from './CreateKP';
 import Insurance from './Insurance';
@@ -10,15 +12,21 @@ import SupplierAgent from './SupplierAgent';
 
 const formTabs = [Leasing, Payments, LeasingObject, SupplierAgent, Insurance, AddProduct, CreateKP];
 
+const Wrapper = styled(Background)`
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 4px 18px 10px;
+  }
+`;
+
 function Form() {
   return (
     <Wrapper>
       <Tabs type="card" tabBarGutter="5px">
         {formTabs.map(({ id, title, Component }) => (
           <Tabs.TabPane tab={title} key={id}>
-            <Background>
-              <Component />
-            </Background>
+            <Component />
           </Tabs.TabPane>
         ))}
       </Tabs>

Components/Calculation/Settings/index.js

@@ -1,7 +1,17 @@
 import Background from 'Elements/layout/Background';
+import styled from 'styled-components';
+import { min } from 'UIKit/mq';
 import renderFormRows from '../lib/render-rows';
 import { rows } from './config';
 
+const Wrapper = styled(Background)`
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 10px 18px;
+  }
+`;
+
 export default function Settings() {
-  return <Background>{renderFormRows(rows)}</Background>;
+  return <Wrapper>{renderFormRows(rows)}</Wrapper>;
 }

Components/Calculation/config/elements-titles.ts

@@ -7,7 +7,7 @@ const titles: Record<ValuesElements | ComputedElements | ActionElements, string>
   selectOpportunity: 'Лизинговая сделка',
   selectQuote: 'Предложение',
   selectProduct: 'Продукт',
-  cbxRecalcWithRevision: 'Пересчёт без пересмотра',
+  cbxRecalcWithRevision: '',
   selectClientRisk: 'Риск клиента',
   selectClientType: 'Тип клиента',
   tbxLeaseObjectPrice: 'Стоимость ПЛ с НДС',

Components/Calculation/index.js

@@ -1,9 +1,28 @@
 import styled from 'styled-components';
 import { Box } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
 import Form from './Form';
 import Settings from './Settings';
 
-const Grid = styled(Box)``;
+const Grid = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  ${min('laptop')} {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+  }
+
+  ${min('desktop')} {
+    grid-template-columns: 2fr 1fr 1.5fr;
+    margin: 8px 5%;
+  }
+
+  ${min('desktop-xl')} {
+    margin: 8px 10%;
+  }
+`;
 
 export default function Calculation() {
   return (

Elements/layout/Background.jsx

@@ -5,10 +5,7 @@ import { min } from 'UIKit/mq';
 const Background = styled(Box)`
   background: #fff;
 
-  padding: 4px 10px;
-
   ${min('laptop')} {
-    padding: 10px 18px;
     box-shadow: 0px 2px 15px -11px rgba(0, 0, 0, 0.75);
   }
 `;

Elements/layout/Tabs.js

@@ -1,13 +1,4 @@
 /* eslint-disable unicorn/filename-case */
-import styled from 'styled-components';
+/* eslint-disable no-restricted-exports */
 
-export { Tabs } from 'antd';
-
-export const Wrapper = styled.div`
-  .ant-tabs-top > .ant-tabs-nav {
-    margin: 0;
-  }
-  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
-    border: none;
-  }
-`;
+export { Tabs as default } from 'antd';

UIKit/mq.ts

@@ -1,9 +1,8 @@
 const screens = {
   tablet: 768,
   laptop: 1024,
-  laptopHD: 1366,
   desktop: 1680,
-  extra: 2560,
+  'desktop-xl': 1921,
 };
 
 const threshold = 0;