From d8c3bcdd17a6d37ce32a5830249a1ca7f543d9e3 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Mon, 1 Jul 2024 20:45:23 +0300
Subject: [PATCH] fix render rows order (Insurance tab)

---
 apps/web/Components/Calculation/Form/Insurance/config.ts | 3 +++
 apps/web/Components/Calculation/Form/Insurance/index.jsx | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/web/Components/Calculation/Form/Insurance/config.ts b/apps/web/Components/Calculation/Form/Insurance/config.ts
index 5e69762..fff64e3 100644
--- a/apps/web/Components/Calculation/Form/Insurance/config.ts
+++ b/apps/web/Components/Calculation/Form/Insurance/config.ts
@@ -1,4 +1,5 @@
 import type { FormTabRows } from '../../lib/render-rows';
+import { transformRowsForMobile } from '../lib/utils';
 
 export const id = 'insurance';
 export const title = 'Страхование';
@@ -11,3 +12,5 @@ export const rows: FormTabRows = [
   [['tbxEngineVolume', 'cbxInsDecentral', 'selectGPSModel']],
   [['selectLeasingWithoutKasko', 'selectInsNSIB']],
 ];
+
+export const mobileRows = transformRowsForMobile(rows);
diff --git a/apps/web/Components/Calculation/Form/Insurance/index.jsx b/apps/web/Components/Calculation/Form/Insurance/index.jsx
index 94981b8..9d008ba 100644
--- a/apps/web/Components/Calculation/Form/Insurance/index.jsx
+++ b/apps/web/Components/Calculation/Form/Insurance/index.jsx
@@ -1,15 +1,15 @@
 import renderFormRows from '../../lib/render-rows';
-import { id, rows, title } from './config';
+import { id, mobileRows, rows, title } from './config';
 import FinGAPTable from './FinGAPTable';
 import InsuranceTable from './InsuranceTable';
+import { Media } from '@/styles/media';
 import { Flex } from 'ui/grid';
 
 function Insurance() {
-  const renderedRows = renderFormRows(rows);
-
   return (
     <Flex flexDirection="column">
-      {renderedRows}
+      <Media lessThan="laptop">{renderFormRows(mobileRows)}</Media>
+      <Media greaterThanOrEqual="laptop">{renderFormRows(rows)}</Media>
       <InsuranceTable />
       <FinGAPTable />
     </Flex>