fix: исправление мелких багов

- исправлена ширина задач внутри "широких" категорий
- исправлена загрузка только что созданных задач
- исправлено многократное создание категорий/задач при многократном нажатии по кнопке создать

src/KBBoard.js

@@ -8,6 +8,7 @@ const KBBoard = () => {
     const navigate = useNavigate();
     const { id } = useParams();
     const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false)
     const [info, setInfo] = useState({});
     const [categories, setCategories] = useState([]);
 
@@ -88,13 +89,16 @@ const KBBoard = () => {
 
     const createTask = async (e) => {
         e.preventDefault();
+        setLoading(true);
         const newTask = { category_id: taskCategori, title: taskTitle, description: taskDescription };
-        axios.post('/api/boards/categories/tasks/create', newTask);
+        await axios.post('/api/boards/categories/tasks/create', newTask);
         await loadBoardData();
         modalCrTask(null)();
+        setLoading(false);
     };
     const createCategory = async (e) => {
         e.preventDefault();
+        setLoading(true);
         try {    
             const newCategory = { board_id: id, title: categoryTitle};
             await axios.post('/api/boards/categories/create', newCategory);
@@ -103,11 +107,13 @@ const KBBoard = () => {
             setError(err.response.data.message)
         } finally {
             modalCrCateg();
+            setLoading(false);
         }
     };
 
     const editTask = async (e) => {
         e.preventDefault();
+        setLoading(true);
         var newTask = { id: editedTask.id, update_method: "title", value: taskTitle };
         await axios.put('/api/boards/categories/tasks/update', newTask);
         newTask = { id: editedTask.id, update_method: "description", value: taskDescription };
@@ -116,9 +122,11 @@ const KBBoard = () => {
         await axios.put('/api/boards/categories/tasks/update', newTask);
         await loadBoardData();
         modalEditTask({}, null)();
+        setLoading(false);
     };
     const editCategory = async (e) => {
         e.preventDefault();
+        setLoading(true);
         try {    
             const newCategory = { id: editedCateg.id, update_method: "title", value: categoryTitle};
             await axios.put('/api/boards/categories/update', newCategory);
@@ -127,23 +135,28 @@ const KBBoard = () => {
             setError(err.response.data.message)
         } finally {
             modalEditCateg({})();
+            setLoading(false);
         }
     };
 
 
     const deleteCategory = async (e) => {
         e.preventDefault();
+        setLoading(true);
         await axios.delete('/api/boards/categories/delete', { data: {id: editedCateg.id} });
         await loadBoardData();
         modalDelCateg();
         modalEditCateg({})();
+        setLoading(false);
     }
     const deleteTask = async (e) => {
         e.preventDefault();
+        setLoading(true);
         await axios.delete('/api/boards/categories/tasks/delete', { data: { id: editedTask.id } });
         await loadBoardData();
         modalDelTask();
         modalEditTask({},null)();
+        setLoading(false);
     }
 
     
@@ -216,8 +229,6 @@ const KBBoard = () => {
                 </div>
 
 
-
-
                 {crCateg && (
                     <div className="confirm-modal">
                         <div className="modal-content">
@@ -231,7 +242,9 @@ const KBBoard = () => {
                                         required
                                     />
                                 </div>
-                                <button type="submit">Подтвердить</button>
+                                <button type="submit" disabled={loading}>
+                                    {loading ? 'Создание...' : 'Создать'}
+                                </button>
                             </form>
                             <button onClick={modalCrCateg}>Отменить</button>
                         </div>
@@ -254,10 +267,11 @@ const KBBoard = () => {
                                         type="text"
                                         value={taskDescription}
                                         onChange={(e) => setTaskDescription(e.target.value)}
-                                        required
                                     />
                                 </div>
-                                <button type="submit">Подтвердить</button>
+                                <button type="submit" disabled={loading}>
+                                    {loading ? 'Создание...' : 'Создать'}
+                                </button>
                             </form>
                             <button onClick={modalCrTask(null)}>Отменить</button>
                         </div>
@@ -277,7 +291,9 @@ const KBBoard = () => {
                                         required
                                     />
                                 </div>
-                                <button type="submit">Подтвердить</button>
+                                <button type="submit" disabled={loading}>
+                                    {loading ? 'Изменение...' : 'Изменить'}
+                                </button>
                             </form>
                             <button onClick={modalEditCateg({})}>Отменить</button>
                             <button className="Important-button" onClick={modalDelCateg}>Удалить</button>
@@ -314,7 +330,9 @@ const KBBoard = () => {
                                         </select>
                                     </div>
                                 </div>
-                                <button type="submit">Подтвердить</button>
+                                <button type="submit" disabled={loading}>
+                                    {loading ? 'Изменение...' : 'Изменить'}
+                                </button>
                             </form>
                             <button onClick={modalEditTask({},null)}>Отменить</button>
                             <button className="Important-button" onClick={modalDelTask}>Удалить</button>
@@ -329,7 +347,9 @@ const KBBoard = () => {
                             <form onSubmit={deleteTask}>
                                 <label >Вы точно хотите удалить задачу {editedTask.title}</label>
                                 <button onClick={modalDelTask}>Отменить</button>
-                                <button className="Important-button" type="submit">Подтвердить</button>
+                                <button className="Important-button" type="submit" disabled={loading}>
+                                    {loading ? 'Удаление...' : 'Удалить'}
+                                </button>
                             </form> 
                         </div>
                     </div>
@@ -342,7 +362,9 @@ const KBBoard = () => {
                             <form onSubmit={deleteCategory}>
                                 <label >Вы точно хотите удалить эту категорию</label>
                                 <button onClick={modalDelCateg}>Отменить</button>
-                                <button className="Important-button" type="submit">Подтвердить</button>
+                                <button className="Important-button" type="submit" disabled={loading}>
+                                    {loading ? 'Удаление...' : 'Удалить'}
+                                </button>
                             </form>
                         </div>
                     </div>

src/css/Board.css

@@ -118,6 +118,7 @@
     justify-content: flex-start;
     align-items: center;
     min-width: 300px;
+    width: 100%;
     margin-top: 16px;
     margin-right: -4px; /* компенсируем отступ контейнера */
     padding-right: 4px;  /* создаём отступ для контента */
@@ -219,20 +220,20 @@
 }
 
 .board-panel::-webkit-scrollbar {
-    height: 8px;
+    height: 12px;
 }
 
 .task-list::-webkit-scrollbar-track ,
 .board-panel::-webkit-scrollbar-track {
     background: #fff;
-    border-radius: 4px;
+    border-radius: 8px;
     margin-left: 8px;
 }
 
 .task-list::-webkit-scrollbar-thumb,
 .board-panel::-webkit-scrollbar-thumb {
     background: #aaa;
-    border-radius: 4px;
+    border-radius: 8px;
     margin-left: 8px;
 }