tracker tasks

src/pages/Tracker/Tracker.js

@@ -9,7 +9,7 @@ import {
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import {caseOfNum, urlForLocal} from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -295,7 +295,11 @@ export const Tracker = () => {
             <div className="archive__tasks">
               <div className="archive__title">
                 <h3>Архив задач:</h3>
-                <p>{filterCompleteTasks.length} задач(а)</p>
+                <p>
+                  {
+                    `${filterCompleteTasks.length} 
+                    ${caseOfNum(filterCompleteTasks.length, "tasks")}`
+                  }</p>
                 <div className="archive__tasks__search">
                   <img src={search} alt="search" />
                   <input
@@ -354,8 +358,9 @@ export const Tracker = () => {
               <div className="archive__title">
                 <h3>Архив проектов:</h3>
                 <p>
-                  {projects.filter((project) => project.status === 10).length}{" "}
-                  проект(ов)
+                  {
+                    `${projects.filter((project) => project.status === 10).length} 
+                     ${caseOfNum(projects.filter((project) => project.status === 10).length, "projects")}`}
                 </p>
               </div>
               <div className="archive__tasksWrapper">

src/pages/Tracker/tracker.scss

@@ -801,16 +801,17 @@
             0px 0px 0px 1px rgba(60, 66, 87, 0.08),
             0px 1px 1px rgba(0, 0, 0, 0.06);
           border-radius: 8px;
-          padding: 16px 14px 16px 8px;
-          min-width: 353px;
-          max-width: 353px;
+          padding: 12px 10px 12px 8px;
+          min-width: 365px;
+          max-width: 380px;
           display: flex;
           flex-direction: column;
-          row-gap: 16px;
+          row-gap: 10px;
           height: fit-content;
           position: relative;
           transition: all 0.3s ease;
           transform: scaleY(-1);
+          min-height: 815px;
 
           @media (max-width: 900px) {
             min-width: auto;
@@ -819,19 +820,28 @@
             transform: scaleX(1);
           }
 
-          &::-webkit-scrollbar {
-            width: 3px;
-            border-radius: 10px;
-          }
+          .tasksContainer {
+            display: flex;
+            flex-direction: column;
+            row-gap: 16px;
+            max-height: 750px;
+            overflow: auto;
+            padding: 8px;
 
-          &::-webkit-scrollbar-thumb {
-            background: #cbd9f9;
-            border-radius: 20px;
-          }
+            &::-webkit-scrollbar {
+              width: 3px;
+              border-radius: 10px;
+            }
 
-          &::-webkit-scrollbar-track {
-            background: #c5c0c6;
-            border-radius: 20px;
+            &::-webkit-scrollbar-thumb {
+              background: #cbd9f9;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: #c5c0c6;
+              border-radius: 20px;
+            }
           }
 
           &__hover {