fix: фикс отобрважения на сжатых экранах

src/Mainpage.js

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 import axios from 'axios';
 import Header from './Header';
-import { useNavigate } from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import './css/Mainpage.css';
 
 const Mainpage = () => {
@@ -48,14 +48,16 @@ const Mainpage = () => {
 
     return (
         <>
-            <Header />
+            <Header/>
             <div className="mainpage">
                 <div className="mainpage__intro">
                     <div className="left-content">
                         <h1>Kanban-доска Fool-Stack</h1>
                         <p>
-                            Kanban-доска помогает видеть весь процесс целиком: что запланировано, что уже в работе и что готово.
+                            Kanban-доска помогает видеть весь процесс целиком: что запланировано, что уже в работе и что
-                            Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст — всё в одном месте.
+                            готово.
+                            Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст —
+                            всё в одном месте.
                         </p>
                     </div>
 
@@ -104,4 +106,4 @@ const Mainpage = () => {
 };
 
 export default Mainpage;
-//TODO: проверка правильности отображения даты в отображении
+//TODO: проверка правильности отображения даты в отображении, приоритет задачи, отображение категории

src/css/Mainpage.css

@@ -11,10 +11,13 @@
     max-width: 1200px;
     display: flex;
     gap: 20px;
+    align-items: flex-start; /* Выравнивание по верху */
+    min-height: 300px; /* Минимальная высота для стабильности */
 }
 
 .left-content {
-    flex: 0 0 60%; /* Сжата справа, чтобы tasks расширился в центр */
+    flex: 1; /* Берет все доступное пространство */
+    min-width: 0; /* Позволяет сжиматься меньше контента */
     text-align: left;
     background-color: #2b3245;
     border-radius: 6px;
@@ -25,13 +28,14 @@
 .left-content h1,
 .left-content p,
 .left-content li {
-    margin: 6px;
+    margin: 6px 0;
     text-align: left;
     color: #CAD1D8;
 }
 
 .tasks-container {
-    flex: 0 0 400px; /* Расширено влево к центру */
+    flex: 0 0 400px; /* Фиксированная ширина справа */
+    max-width: 400px; /* Дополнительная защита */
     background-color: #2b3245;
     border-radius: 6px;
     padding: 10px;
@@ -59,6 +63,7 @@
     max-height: 250px;
     overflow-y: auto;
     padding-right: 10px;
+    flex: 1; /* Занимает оставшееся пространство */
 }
 
 .tasks-list::-webkit-scrollbar {
@@ -66,15 +71,13 @@
 }
 
 .tasks-list::-webkit-scrollbar-track {
-    background: #fff;
+    background: #2b3245;
     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 {
@@ -87,6 +90,7 @@
     padding: 4px 12px;
     border-radius: 8px;
     color: #CAD1D8;
+    flex: 1;
     text-align: left;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -100,3 +104,17 @@
 .task-item:last-child {
     margin-bottom: 0;
 }
+
+/* Адаптивность для мобильных */
+@media (max-width: 768px) {
+    .mainpage__intro {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .tasks-container {
+        flex: none;
+        max-width: none;
+        width: 100%;
+    }
+}