Update styles.py

src/ui/styles.py

@@ -4,14 +4,17 @@ html, body {
     background-color: #212121 !important;
     margin: 0 !important;
     padding: 0 !important;
-    height: 100vh !important; /* Жестко задаем высоту экрана */
-    overflow: hidden !important; /* Убиваем бесконечный внешний скролл */
+    height: 100vh !important;
+    overflow: hidden !important; /* Блокируем внешний скролл */
 }
 
 .gradio-container {
     background-color: #212121 !important;
     margin: 0 !important;
     padding: 0 !important;
+    height: 100vh !important; /* Жестко 100% экрана */
+    max-width: 100% !important;
+    overflow: hidden !important;
 }
 
 /* 2. Главный ряд */
@@ -19,6 +22,9 @@ html, body {
     margin: 0 !important;
     gap: 0 !important;
     background-color: #212121 !important;
+    height: 100% !important;
+    flex-wrap: nowrap !important; /* Запрещаем перенос колонки чата под сайдбар */
+    min-height: 0 !important;
 }
 
 /* 3. Боковая панель */
@@ -26,9 +32,11 @@ html, body {
     background-color: #171717 !important;
     border-right: 1px solid #2f2f2f !important;
     padding: 1.5rem 1.25rem !important;
+    height: 100% !important;
+    overflow-y: auto !important; /* Включаем скролл внутри сайдбара, если много настроек */
 }
 
-/* Кнопка сворачивания/разворачивания сайдбара (круглая, всегда поверх) */
+/* Кнопки сайдбара оставляем как у вас... */
 .sidebar-parent button.toggle-button,
 .sidebar-parent > button {
     background-color: #171717 !important;
@@ -55,6 +63,10 @@ html, body {
     background-color: #212121 !important;
     padding: 0 !important;
     margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    min-height: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: защита от расширения колонки */
 }
 
 /* Стилизация компонента Chatbot */
@@ -65,11 +77,14 @@ html, body {
     max-width: 800px !important;
     margin: 0 auto !important;
     width: 100% !important;
+    flex-grow: 1 !important; /* Заставляем чат занять все свободное место над плашкой */
+    min-height: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: убивает бесконечный цикл */
 }
 
 #chatbot > .wrapper {
     background: transparent !important;
     border: none !important;
+    min-height: 0 !important;
 }
 
 /* 5. Настройки пузырей сообщений и текста */
@@ -117,10 +132,12 @@ html, body {
 /* 6. Поле ввода (ChatGPT стиль) */
 #input-area {
     max-width: 800px !important;
+    width: 100% !important;
     margin: 0 auto 1.5rem auto !important;
     padding: 0 1rem !important;
     background: transparent !important;
     border: none !important;
+    flex-shrink: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: запрещает чату сжимать и выталкивать плашку */
 }
 
 #input-area > div,