feat: Add shared Container component, refactor CRM dashboard table layout with it, adjust responsive heights for filters and tables, and include viewport meta tags.

MaximSamorukov · MaximSamorukov · commit 470185fa3bf4 · 2025-11-25T22:00:43.000+03:00
diff --git a/src/app/(crm)/crm/dashboard/layout.module.scss b/src/app/(crm)/crm/dashboard/layout.module.scss
@@ -6,7 +6,6 @@
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
-  padding-top: 20px;
 }
 
 .crm {
@@ -19,5 +18,6 @@
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
+    box-sizing: border-box;
   }
 }
diff --git a/src/app/(crm)/crm/dashboard/style.module.scss b/src/app/(crm)/crm/dashboard/style.module.scss
diff --git a/src/app/(crm)/layout.tsx b/src/app/(crm)/layout.tsx
@@ -8,6 +8,7 @@ import type { Metadata } from 'next';
 import { Roboto } from 'next/font/google';
 import '@/app/(website)/globals.css';
 import { Provider } from '@/shared/Provider';
+import Head from 'next/head';
 
 const roboto = Roboto({
   variable: '--font-roboto',
@@ -26,6 +27,18 @@ export default async function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Head>
+        <link
+          rel="preload"
+          href="/crm_icon.svg"
+          as="image"
+          type="image/svg+xml"
+        />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+      </Head>
       <body className={roboto.variable}>
         <Provider>{children}</Provider>
       </body>
diff --git a/src/app/(website)/layout.tsx b/src/app/(website)/layout.tsx
@@ -37,6 +37,10 @@ export default async function RootLayout({
           as="image"
           type="image/svg+xml"
         />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
       </Head>
       <body className={roboto.variable}>
         <Provider>
diff --git a/src/pages_layer/Dashboard/Container/style.module.scss b/src/pages_layer/Dashboard/Container/style.module.scss
diff --git a/src/shared/ui/Container/index.tsx b/src/shared/ui/Container/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import s from './style.module.scss';
+
+type ContainerProps = {
+  children: React.ReactElement;
+};
+export const Container: React.FC<ContainerProps> = ({ children }) => {
+  return <div className={s.container}>{children}</div>;
+};
diff --git a/src/shared/ui/Container/style.module.scss b/src/shared/ui/Container/style.module.scss
@@ -0,0 +1,17 @@
+.container {
+  width: 100%;
+  overflow-y: scroll;
+  border-right: 1px solid rgba(white, 0.1);
+  border-left: 1px solid rgba(white, 0.1);
+  height: calc(100vh - 30px - 20px - 155px - 60px);
+
+  @media (max-width: 775px) {
+    height: calc(100vh - 30px - 20px - 178px - 60px);
+  }
+  @media (max-width: 590px) {
+    height: calc(100vh - 30px - 20px - 228px - 60px);
+  }
+  @media (max-width: 400px) {
+    height: calc(100vh - 30px - 20px - 64px - 60px);
+  }
+}
diff --git a/src/widgets/CRMDashboard/Filters/style.module.scss b/src/widgets/CRMDashboard/Filters/style.module.scss
@@ -1,15 +1,22 @@
 .container {
   width: 100%;
-  min-height: 155px;
-  height: fit-content;
+  max-height: 155px;
+  height: 155px;
   box-sizing: border-box;
   padding: 3px;
   border: 1px solid rgba(white, 0.1);
+
+  @media (max-width: 775px) {
+    max-height: 178px;
+    height: 178px;
+  }
   @media (max-width: 590px) {
-    height: auto;
+    max-height: 228px;
+    height: 228px;
   }
   @media (max-width: 400px) {
-    min-height: 30px;
+    max-height: 64px;
+    height: 64px;
   }
 }
 
diff --git a/src/widgets/CRMDashboard/Table/index.tsx b/src/widgets/CRMDashboard/Table/index.tsx
@@ -4,12 +4,15 @@ import { TableHeader } from './ui/TableHeader';
 import { TableBody } from './ui/TableBody';
 import { TablePaging } from './ui/TablePaging';
 import { TableModal } from './ui/TableModal';
+import { Container } from '@/shared/ui/Container';
 
 export const Table = () => {
   return (
     <div className={s.container}>
       <TableHeader />
-      <TableBody />
+      <Container>
+        <TableBody />
+      </Container>
       <TablePaging />
       <TableModal />
     </div>
diff --git a/src/widgets/CRMDashboard/Table/style.module.scss b/src/widgets/CRMDashboard/Table/style.module.scss
@@ -1,8 +1,18 @@
 .container {
   width: 100%;
-  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  height: calc(100vh - 30px - 20px - 155px);
+
+  @media (max-width: 775px) {
+    height: calc(100vh - 30px - 20px - 178px);
+  }
+  @media (max-width: 590px) {
+    height: calc(100vh - 30px - 20px - 228px);
+  }
+  @media (max-width: 400px) {
+    height: calc(100vh - 30px - 20px - 64px);
+  }
 }
diff --git a/src/widgets/CRMDashboard/Table/ui/TableBody/style.module.scss b/src/widgets/CRMDashboard/Table/ui/TableBody/style.module.scss
@@ -2,8 +2,6 @@
   width: 100%;
   box-sizing: border-box;
   padding: 3px;
-  border-right: 1px solid rgba(white, 0.1);
-  border-left: 1px solid rgba(white, 0.1);
   flex: 1;
   overflow-y: scroll;
   position: relative;

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`	`align-items: center;`
`7`	`7`	`justify-content: flex-start;`
`8`	`8`	`box-sizing: border-box;`
`9`		`- padding-top: 20px;`
`10`	`9`	`}`
`11`	`10`
`12`	`11`	`.crm {`
`@@ -19,5 +18,6 @@`
`19`	`18`	`align-items: center;`
`20`	`19`	`justify-content: flex-start;`
`21`	`20`	`gap: 10px;`
	`21`	`+ box-sizing: border-box;`
`22`	`22`	`}`
`23`	`23`	`}`