small fix

lzipus/src/browser_action/popup.css

@@ -2,7 +2,7 @@ body {
   margin: 0;
   min-width: 300px;
   max-width: 3000px;
-  width: 400px;
+  width: 100%; /* Используем 100%, чтобы не ограничивать ширину */
   background: #abcef5; /* Светлый фон */
   font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */
   box-sizing: border-box;
@@ -12,6 +12,7 @@ div.container {
   display: flex;
   flex-direction: column;
   padding: 1px;
+  width: 100%; /* Обеспечиваем, чтобы контейнер растягивался по ширине */
 }
 
 div.header {
@@ -72,6 +73,8 @@ div.templates {
   display: flex;
   flex-direction: column;
   min-height: 200px;
+  width: 100%; /* Обеспечиваем, чтобы шаблоны занимали всю доступную ширину */
+  padding: 0;
 }
 
 span.template {
@@ -83,6 +86,8 @@ span.template {
   border: 1px solid #8888c6; /* Цвет рамки совпадает с рамкой категории */
   border-radius: 8px; /* Скругленные углы */
   overflow: hidden;
+  width: 100%; /* Шаблоны должны растягиваться на всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход при наведении */
 }
 
@@ -128,6 +133,36 @@ span.template:hover {
   border: solid #8888c6 1px; /* Тонкая рамка для категории */
   border-radius: 1px 10px / 12px;
   box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */
+  width: 100%; /* Категория растягивается на всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
+}
+
+.category h3 {
+  display: flex;
+  justify-content: space-between; /* Располагаем элементы по краям */
+  align-items: center;
+  cursor: pointer; /* Курсор при наведении на весь блок */
+  width: 100%; /* Заголовок занимает всю ширину */
+  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
+}
+
+.toggle-icon {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.category-content {
+  display: none;
+  padding-left: 20px;
+  width: 100%; /* Содержимое категории растягивается на всю ширину */
+}
+
+.category-content.show {
+  display: block;
+}
+
+.category h3 i {
+  transition: transform 0.3s ease;
 }
 
 /* Стили для темной темы */
@@ -167,28 +202,3 @@ body.dark-theme {
   color: #fff;
 }
 
-.category h3 {
-  display: flex;
-  justify-content: space-between; /* Располагаем элементы по краям */
-  align-items: center;
-  cursor: pointer; /* Курсор при наведении на весь блок */
-}
-
-.toggle-icon {
-  cursor: pointer;
-  margin-left: 10px;
-}
-
-.category-content {
-  display: none;
-  padding-left: 20px;
-}
-
-.category-content.show {
-  display: block;
-}
-
-.category h3 i {
-  transition: transform 0.3s ease;
-}
-  

lzipus/src/browser_action/popup.js

@@ -384,3 +384,4 @@ document.querySelectorAll('.category h3').forEach(function(header) {
       }
   });
 });
+