Update styles.py

src/ui/styles.py

@@ -1,16 +1,24 @@
 CSS = """
-/* 1. Глобальный фон страницы */
+/* 1. Блокировка высоты и скролла всей страницы (как в ChatGPT) */
 html, body, .gradio-container {
     background-color: #212121 !important;
     margin: 0 !important;
     padding: 0 !important;
+    height: 100vh !important;
+    min-height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important; /* Убирает бесконечный скролл страницы */
 }
 
-/* 2. Главный ряд (сайдбар + чат) */
+/* 2. Главный ряд на всю высоту экрана */
 #main-row {
     margin: 0 !important;
     gap: 0 !important;
     background-color: #212121 !important;
+    height: 100vh !important;
+    min-height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
 }
 
 /* 3. Боковая панель */
@@ -18,6 +26,8 @@ html, body, .gradio-container {
     background-color: #171717 !important;
     border-right: 1px solid #2f2f2f !important;
     padding: 1.5rem 1.25rem !important;
+    height: 100vh !important;
+    overflow-y: auto !important;
 }
 
 /* Кнопка сворачивания/разворачивания сайдбара */
@@ -42,14 +52,20 @@ html, body, .gradio-container {
     background-color: #2f2f2f !important;
 }
 
-/* 4. Колонка чата */
+/* 4. Колонка чата (принудительно прижимает ввод вниз) */
 #col-chat-main {
     background-color: #212121 !important;
     padding: 0 !important;
     margin: 0 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important; /* Чат сверху, ввод строго снизу */
+    overflow: hidden !important;
 }
 
-/* Стилизация компонента Chatbot */
+/* Область сообщений занимает все свободное пространство */
 #chatbot {
     background-color: transparent !important;
     border: none !important;
@@ -57,11 +73,17 @@ html, body, .gradio-container {
     max-width: 800px !important;
     margin: 0 auto !important;
     width: 100% !important;
+    flex: 1 1 auto !important; /* Растягивается на максимум */
+    min-height: 0 !important;   /* Предотвращает раздувание */
+    overflow-y: auto !important; /* Скролл только внутри чата */
 }
 
 #chatbot > .wrapper {
     background: transparent !important;
     border: none !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
 }
 
 /* 5. Настройки пузырей сообщений и текста */
@@ -106,13 +128,15 @@ html, body, .gradio-container {
     color: #ececec !important;
 }
 
-/* 6. Поле ввода (ChatGPT стиль) */
+/* 6. Поле ввода прижатое к низу */
 #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,