fix:Отображение задач и страницы

Пофикшено отображение задач для неавторизованных и авторизованных пользователей. Так же пофикшено отображение информации на сайте. Пофикшено отображение "отсутсвия задач" пока пользователь незалогинен.

src/css/Mainpage.css

@@ -1,53 +1,102 @@
-.content-wrapper{
+.mainpage {
     transition: all .4s ease;
 }
 
-.main-layout {
+.mainpage__intro {
     background-color: #1f2430;
-    border-radius: 8px;
+    border-radius: 6px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
     margin: 10px auto;
     max-width: 1200px;
+    display: flex;
+    gap: 20px;
 }
 
 .left-content {
-    flex: 1;
-    text-align: left;  /* Выравнивание текста слева */
+    flex: 0 0 60%; /* Сжата справа, чтобы tasks расширился в центр */
+    text-align: left;
+    background-color: #2b3245;
+    border-radius: 6px;
+    padding: 20px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .left-content h1,
 .left-content p,
 .left-content li {
+    margin: 6px;
     text-align: left;
     color: #CAD1D8;
 }
 
-.tasks-box {
-    flex: 0 0 300px;  /* Фиксированная ширина бокса справа */
-    background-color: #33404d;
-    border-radius: 8px;
-    padding: 20px;
-    border: 1px solid #999;
+.tasks-container {
+    flex: 0 0 400px; /* Расширено влево к центру */
+    background-color: #2b3245;
+    border-radius: 6px;
+    padding: 10px;
     height: fit-content;
+    display: flex;
+    flex-direction: column;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
-.tasks-box h3 {
-    margin-top: 0;
+/* Остальной CSS без изменений */
+.tasks-title {
+    margin: 0 0 15px 0;
     color: #CAD1D8;
     text-align: center;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #2b3245;
 }
 
-.tasks-box ul {
+.tasks-list {
     list-style-type: none;
     padding: 0;
+    margin: 0;
+    max-height: 250px;
+    overflow-y: auto;
+    padding-right: 10px;
 }
 
-.tasks-box li {
-    background-color: #1f2430;
-    margin-bottom: 10px;
-    padding: 10px;
-    border-radius: 4px;
+.tasks-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.tasks-list::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 8px;
+    margin-left: 8px;
+}
+
+.tasks-list::-webkit-scrollbar-thumb {
+    background: #aaa;
+    border-radius: 8px;
+    margin-left: 8px;
+}
+
+.tasks-list::-webkit-scrollbar-thumb:hover {
+    background: #888;
+}
+
+.task-item {
+    background-color: #3d4763;
+    margin-bottom: 8px;
+    padding: 4px 12px;
+    border-radius: 8px;
     color: #CAD1D8;
     text-align: left;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.task-item:hover {
+    background-color: #4a587e;
+    transform: translateY(-1px);
+}
+
+.task-item:last-child {
+    margin-bottom: 0;
 }