feat: added adaptivity to crm table modal

Author: MaximSamorukov

src/widgets/CRMDashboard/Table/ui/TableModal/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ModalComponent } from '@/shared/ui/Modal';
 import { crmPreviewModalState } from '@/shared/state/crmPreviewModal/state';
 import { observer } from 'mobx-react-lite';
@@ -8,21 +8,33 @@ import { EditDataField } from './ui/EditDataField';
 import { DeleteBtn } from './ui/DeleteBtn';
 import s from './style.module.scss';
 import { Preview3DModel } from './ui/Preview3DModel';
+import { useWindowWidth } from '@/shared/hooks';
 
 export const TableModal = observer(() => {
+  const width = useWindowWidth();
   const open = crmPreviewModalState.modalOpen;
   const loading = crmPreviewModalState.deletePending;
   const handleClose = () => {
     crmPreviewModalState.modalOpen = false;
     crmPreviewModalState.resetAllFields();
   };
+  const isPrintOrder = crmPreviewModalState.orderType === 'print_order';
+
+  const modalWidth = isPrintOrder ? 880 : 440;
+
+  const style = useMemo(() => {
+    return {
+      width: width >= modalWidth ? modalWidth : width - 20,
+      height: 'fitContent',
+    };
+  }, [width, modalWidth]);
   return (
     <ModalComponent
       open={open}
       loading={loading}
       withControl={false}
       onClose={handleClose}
-      style={{ width: 800, height: 'fitContent' }}
+      style={style}
     >
       {crmPreviewModalState.orderType === 'print_order' ? (
         <div className={s.metaContainer}>

src/widgets/CRMDashboard/Table/ui/TableModal/style.module.scss

@@ -7,6 +7,11 @@
   justify-content: flex-start;
   box-sizing: border-box;
   padding: 0;
+
+  @media (max-width: 880px) {
+    width: 95%;
+    flex-direction: column-reverse;
+  }
 }
 .container {
   width: 100%;

src/widgets/CRMDashboard/Table/ui/TableModal/ui/EditDataField/Fields/OrderAdditionalsField/style.module.scss

@@ -15,6 +15,9 @@
   }
   &Label {
     font-size: 14px;
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
   }
 }
 

src/widgets/CRMDashboard/Table/ui/TableModal/ui/EditDataField/style.module.scss

@@ -11,10 +11,16 @@
     width: 150px;
     height: 30px;
     font-size: 14px;
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
   }
   &Field {
     width: fit-content;
     height: 30px;
     font-size: 14px;
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
   }
 }

src/widgets/CRMDashboard/Table/ui/TableModal/ui/Preview3DModel/ui/Controls/style.module.scss

@@ -19,6 +19,9 @@
   span {
     display: block;
   }
+  @media (max-width: 440px) {
+    font-size: 12px;
+  }
   &WithPow {
     box-sizing: border-box;
     width: fit-content;
@@ -32,5 +35,8 @@
     span {
       display: block;
     }
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
   }
 }

src/widgets/CRMDashboard/Table/ui/TableModal/ui/ShowDataField/style.module.scss

@@ -11,12 +11,17 @@
     width: 150px;
     height: 30px;
     font-size: 14px;
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
   }
   &Field {
     width: fit-content;
     height: 30px;
     font-size: 14px;
-
+    @media (max-width: 440px) {
+      font-size: 12px;
+    }
     &Value {
       width: 200px;
       overflow: hidden;