Удаление лишних элементов css

src/App.css

@@ -3,7 +3,7 @@ html, body, #root {
   padding: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden; /* Запрещает появление скроллбаров у самого окна браузера */
+  overflow: hidden;
   background-color: #edeef0;
 }
 
@@ -20,11 +20,10 @@ html, body, #root {
   padding: 0px 0px 0px 0px;
 }
 
-/* Главный контейнер для тулбара и холста */
 .main-container {
   display: flex;
   flex: 1;
-  height: calc(100vh - 40px); /* Вычитаем высоту панели управления */
+  height: calc(100vh - 40px); /* - высота панели управления */
   min-height: calc(100vh - 65px);
   position: relative;
 }
@@ -36,7 +35,6 @@ html, body, #root {
   flex: 1;
 }
 
-/* Стилизация холста ReactFlow под твой старый дизайн */
 .canvas-container {
   flex: 1;
   height: 100%;
@@ -45,7 +43,6 @@ html, body, #root {
   box-sizing: border-box;
 }
 
-/* Твоя старая панель управления */
 .controlPanel {
   width: 100%;
   height: 30px;
@@ -59,7 +56,6 @@ html, body, #root {
   align-items: center;
 }
 
-/* --- ОСТАЛЬНЫЕ ТВОИ КЛАССЫ ОСТАВЛЯЕМ ДЛЯ СЛЕДУЮЩИХ КОМПОНЕНТОВ --- */
 .toolbar {
   width: 218px;
   margin: 4.5px 4px 0px 4px;
@@ -101,21 +97,20 @@ html, body, #root {
 
 .toolbarBlocks {
   width: 100%;
+  max-height: calc((100% - 58px) / 3 * 2);
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  gap: 12px;
   padding: 10px;
   box-sizing: border-box;
+  overflow-y: auto;
 }
 
-/* Пульсация для портов (пригодится далее) */
 @keyframes pulse {
   from { r: 4; stroke: rgba(255, 215, 0, 0.4); stroke-width: 0; }
   to { r: 7; stroke: rgba(255, 215, 0, 1); stroke-width: 3; }
 }
 
-
-/* Стили самого контейнера блока */
 .custom-fbd-block {
   background-color: whitesmoke;
   border: 1.5px solid black;
@@ -126,7 +121,6 @@ html, body, #root {
   border-radius: 4px;
 }
 
-/* Стили текста названия внутри блока */
 .custom-fbd-block .block-title {
   padding-top: 6px;
   font-size: 14px;
@@ -135,23 +129,18 @@ html, body, #root {
 }
 
 
-/* Обычное состояние — белый фон */
 .toolbarLines svg {
   background-color: white;
-  transition: background-color 0.2s ease; /* Плавное переключение цвета */
+  transition: background-color 0.2s ease;
   border: 0px solid #e3e8e6;
 }
 
-/* Активное состояние — серый фон */
 .toolbarLines svg.activeLine {
-  background-color: #e3e8e6; /* Можно использовать 'gray', '#808080' или любой оттенок */
+  background-color: #e3e8e6;
-  /*border: 2px solid #fff;*/
   border: 0px solid #e3e8e6;
-}*/
+}
 
 
-
-/* Родной контейнер сетки линий связи из твоего старого проекта */
 .toolbarLines {
   width: 100%;
   height: auto;
@@ -159,28 +148,26 @@ html, body, #root {
   bottom: 0;
   left: 0;
   display: grid;
-  grid-template-columns: 1fr 1fr; /* Ровно 2 колонки */
+  grid-template-columns: 1fr 1fr;
   box-sizing: border-box;
 }
 
-/* Общие базовые стили кнопок-линий: без закруглений, без зазоров */
 .toolbarLines button {
-  margin: 0 !important; /* Убираем любые отступы между кнопками */
+  margin: 0 !important;
-  border: 1px solid #e3e8e6 !important; /* Твоя старая рамка */
+  padding: 0 !important;
-  border-radius: 0 !important; /* Намертво убираем скругления краев */
+  border: 1px solid #e3e8e6 !important;
+  border-radius: 0 !important;
   cursor: pointer;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
 }
 
-/* Обычное дефолтное состояние кнопок линий — белый фон */
 .toolbarLines button.notActiveEdgeTab {
   background-color: white !important;
 }
 
-/* Активное состояние — серый фон, жирный текст (теперь цвет будет меняться при клике!) */
 .toolbarLines button.activeEdgeTab {
   background-color: #e3e8e6 !important;
   font-weight: bold;
@@ -207,7 +194,6 @@ html, body, #root {
   pointer-events: none;
 }
 
-/* Мини-кружочки портов для превью блоков */
 .preview-port {
   position: absolute;
   width: 6px;
@@ -215,74 +201,13 @@ html, body, #root {
   border-radius: 50%;
 }
 
-
-/* --- Сетка блоков в тулбаре --- */
-.toolbarBlocks {
-  width: 100%;
-  max-height: calc((100% - 58px) / 3 * 2);
-  display: grid;
-  grid-template-columns: 1fr 1fr; /* 2 столбика */
-  gap: 12px;
-  padding: 10px;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-/* Настройки оформления мини-блоков в тулбаре */
-.toolbar-block {
-  background-color: whitesmoke;
-  border: 1px solid black;
-  box-sizing: border-box;
-  position: relative;
-  font-family: Arial, sans-serif;
-  user-select: none;
-  border-radius: 4px;
-  cursor: grab;
-}
-
-/* --- Сетка линий связи внизу тулбара --- */
-.toolbarLines {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr; /* Строго 2 столбика */
-  box-sizing: border-box;
-}
-
-/* Кнопки типов линий: без зазоров, без скруглений */
-.toolbarLines button {
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 1px solid #e3e8e6 !important;
-  border-radius: 0 !important;
-  cursor: pointer;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Векторный SVG внутри кнопки пропускает цвета сквозь себя */
 .toolbarLines button svg {
-  background: transparent !important; /* Фоном управляет сама кнопка */
+  background: transparent !important;
   width: 100%;
   height: 100%;
 }
 
-/* Обычное состояние кнопок-линий */
-.toolbarLines button.notActiveConnectionTab {
-  background-color: white !important;
-}
 
-/* Активное состояние кнопок-линий — теперь серая заливка четко видна */
-.toolbarLines button.activeConnectionTab {
-  background-color: #e3e8e6 !important;
-}
-
-
-/* Кнопки в шапке управления */
 .control-button {
   font-size: 13px;
   border: none;
@@ -306,6 +231,7 @@ html, body, #root {
   background-color: #D8000A;
   color: white;
 }
+
 .clear-button:hover {
   background-color: #a80007;
 }

src/components/Toolbar.jsx

@@ -112,7 +112,7 @@ function Toolbar({ activeEdgeType, onChangeEdgeType }) {
           ))}
         </div>
 
-        {/*Линии*/}
+        {/*Соединения*/}
         <div className = "toolbarLines" ref = {containerRef}>
           {LINES_TYPES.map((line) => (
             <ToolbarLine

src/components/ToolbarElements.jsx

@@ -61,7 +61,6 @@ export const ToolbarBlock = memo(({ block, onDragStart }) => {
   );
 })
 
-// 2. Компонент превью линии связи
 export function ToolbarLine({ line, caseWidth, isActive, onClick }) {
   return (
     <button
@@ -69,18 +68,18 @@ export function ToolbarLine({ line, caseWidth, isActive, onClick }) {
       onClick={() => onClick && onClick(line.type)}
       style={{
         width: `${caseWidth}px`,
-        height: `${caseWidth / 2.5}px` // Пропорциональная высота
+        height: `${caseWidth / 2.5}px`
       }}
     >
       <svg>
         <line 
-          x1="10%" y1="50%" 
+          x1 = "13%" y1 = "50%" 
-          x2="90%" y2="50%" 
+          x2 = "87%" y2 = "50%" 
-          stroke={line.stroke} 
+          stroke = {line.stroke} 
-          strokeWidth="2" 
+          strokeWidth = "2" 
-          strokeDasharray={line.dasharray}
+          strokeDasharray = {line.dasharray}
         />
       </svg>
     </button>
-  );
+  )
-};
+}