feat: Add PostCSS configuration, refactor CRM drawer close button to text, and adjust various UI styles and scrolling behaviors.

Author: MaximSamorukov

postcss.config.ts

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' && {
+      cssnano: {
+        preset: ['default', { discardComments: { removeAll: true } }],
+      },
+    }),
+  },
+};

src/app/(crm)/crm/dashboard/layout.module.scss

@@ -6,6 +6,9 @@
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
+
+  overflow: auto;
+  scrollbar-width: none;
 }
 
 .crm {
@@ -19,5 +22,8 @@
     justify-content: flex-start;
     gap: 10px;
     box-sizing: border-box;
+
+    overflow: auto;
+    scrollbar-width: none;
   }
 }

src/features/CRMDrawerFilterComponent/index.tsx

@@ -35,11 +35,11 @@ export const CRMDrawerFilterComponent: React.FC<CRMDrawerFilterComponentProps> =
         open={crmDraweFilterState.open}
       >
         <div className={s.drawerContainer}>
-          <div className={s.drawerControlsContainer}>
-            <DrawerCloseButton handleCloseDrawer={handleCloseModal} />
-          </div>
           <div className={s.drawerFiltersContainer}>{children}</div>
         </div>
+        <div className={s.drawerControlsContainer}>
+          <DrawerCloseButton handleCloseDrawer={handleCloseModal} />
+        </div>
       </Drawer>
     );
   });

src/features/CRMDrawerFilterComponent/style.module.scss

@@ -9,8 +9,10 @@ $WIDTH: 100%;
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
-    padding: 15px 20px;
-    border: 1px solid rgba(white, 0.1);
+    padding: 5px 15px 25px;
+    border-bottom: 1px solid rgba(white, 0.1);
+    border-right: 1px solid rgba(white, 0.1);
+    border-left: 1px solid rgba(white, 0.1);
   }
   &FiltersContainer {
     height: 100%;
@@ -23,7 +25,6 @@ $WIDTH: 100%;
     padding: 15px;
     padding-top: 30px;
     color: white;
-    border-bottom: 1px solid rgba(white, 0.1);
     border-right: 1px solid rgba(white, 0.1);
     border-left: 1px solid rgba(white, 0.1);
 

src/features/CRMDrawerFilterComponent/ui/CloseButton/index.tsx

@@ -7,8 +7,10 @@ export function DrawerCloseButton({
   handleCloseDrawer,
 }: DrawerCloseButtonProps) {
   return (
-    <button className={s.btnContainer} onClick={handleCloseDrawer}>
-      <div className={s.btnCross} />
-    </button>
+    <div className={s.container}>
+      <button onClick={handleCloseDrawer} className={s.btn}>
+        Закрыть
+      </button>
+    </div>
   );
 }

src/features/CRMDrawerFilterComponent/ui/CloseButton/style.module.scss

@@ -1,41 +1,36 @@
-.btn {
-  &Container {
-    all: unset;
-    height: auto;
-    width: auto;
-    border-radius: 8px;
+.container {
+  width: 150px;
+  height: 25px;
+  box-sizing: border-box;
+  position: relative;
+  @media (max-width: 400px) {
+    width: 100%;
+  }
+  &Label {
+    position: absolute;
+    left: 2px;
+    top: -25px;
+    width: fit-content;
+    height: 30px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     box-sizing: border-box;
-    padding: 3px;
-    cursor: pointer;
-  }
-  &Cross {
-    color: white;
-    width: 15px;
-    height: 15px;
-    position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 15px;
-      top: 0px;
-      left: 7px;
-      background-color: white;
-      transform: rotate(45deg);
-    }
-    &::before {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 15px;
-      top: 0px;
-      left: 7px;
-      background-color: white;
-      transform: rotate(-45deg);
-    }
+    font-size: 13px;
   }
 }
+
+button.btn {
+  all: unset;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(white, 0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: white;
+}

src/shared/ui/Container/style.module.scss

@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   border-right: 1px solid rgba(white, 0.1);
   border-left: 1px solid rgba(white, 0.1);
   height: calc(100vh - 30px - 20px - 155px - 60px);

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

@@ -3,8 +3,8 @@
   box-sizing: border-box;
   padding: 3px;
   flex: 1;
-  overflow-y: scroll;
   position: relative;
+
   &Row {
     all: unset;
     width: 100%;

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

@@ -17,6 +17,9 @@
       top: calc(190px / 2 - 5px);
       right: 185px;
     }
+    @media (max-height: 670px) {
+      height: 200px;
+    }
   }
   &Controls {
     height: 40px;