Update styles.py

src/ui/styles.py

@@ -1,4 +1,9 @@
 CSS = """
+html, body, .gradio-container {
+    height: 100% !important;
+    margin: 0 !important;
+}
+
 /* 1. Глобальный контейнер: занимаем все пространство без прокрутки страницы */
 .gradio-container {
     max-width: 100% !important;
@@ -8,19 +13,25 @@ CSS = """
     display: flex !important;
     flex-direction: column !important;
     background-color: var(--background-fill-primary) !important;
+    overflow: hidden !important;
 }
 
-/* 2. Основной ряд: Sidebar + Chat */
+/* 2. Основной ряд: Sidebar + Chat
+   Сделано flex: main-row занимает оставшееся пространство и не вызывает лишнюю высоту */
 #main-row {
-    flex-grow: 1 !important;
-    height: 100vh !important;
+    display: flex !important;
+    flex: 1 1 auto !important;
+    height: 100% !important;
     margin: 0 !important;
     gap: 0 !important;
     overflow: hidden !important;
 }
 
-/* 3. Сайдбар */
+/* 3. Сайдбар: фиксированная ширина, скролл при переполнении */
 #sidebar-container {
+    width: 320px !important;
+    min-width: 240px !important;
+    max-width: 380px !important;
     border-right: 1px solid var(--border-color-primary) !important;
     background-color: var(--background-fill-secondary) !important;
     padding: 1.25rem !important;
@@ -28,10 +39,9 @@ CSS = """
     display: flex !important;
     flex-direction: column !important;
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
+    overflow: auto !important;
 }
 
-
-
 /* Убираем "старение" (побледнение) при обновлении данных */
 .stale {
     opacity: 1 !important;
@@ -42,17 +52,20 @@ CSS = """
 #col-chat-main {
     display: flex !important;
     flex-direction: column !important;
-    height: 100vh !important;
+    height: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
     gap: 0 !important;
     background: var(--background-fill-primary) !important;
+    flex: 1 1 auto !important;
+    overflow: hidden !important;
 }
 
-/* ЧАТБОТ: Растягиваем на всю высоту */
+/* ЧАТБОТ: Растягиваем на всю доступную высоту, min-height:0 для корректного flex-scroll */
 #chatbot {
-    flex-grow: 1 !important;
-    height: 100% !important;
+    flex: 1 1 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
     border: none !important;
     border-radius: 0 !important;
     margin: 0 !important;
@@ -61,28 +74,36 @@ CSS = """
     overflow-y: auto !important;
 }
 
-/* Фикс для внутренней обертки Gradio Chatbot */
+/* Фикс для внутренней обертки Gradio Chatbot - предотвращаем overflow issues */
 #chatbot > .wrapper {
-    flex-grow: 1 !important;
+    flex: 1 1 auto !important;
     display: flex !important;
     flex-direction: column !important;
+    min-height: 0 !important;
+    overflow: auto !important;
 }
 
-/* 6. Поле ввода: всегда внизу */
+/* 6. Поле ввода: фиксируем снизу с помощью sticky, чтобы всегда быть видимым */
 #input-area {
-    padding: 1rem 2rem !important;
+    padding: 0.75rem 1rem !important;
     border-top: 1px solid var(--border-color-primary) !important;
     background: var(--background-fill-primary) !important;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02) !important;
     flex-shrink: 0 !important;
+    position: sticky !important;
+    bottom: 0 !important;
+    z-index: 10 !important;
 }
 
+/* Текстовое поле адаптируется по ширине и не выходит за границы */
 #input-area textarea {
     border-radius: 10px !important;
     border: 1px solid var(--border-color-primary) !important;
     padding: 12px 16px !important;
     font-size: 1rem !important;
     transition: border-color 0.2s ease !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
 }
 
 #input-area textarea:focus {
@@ -98,8 +119,8 @@ CSS = """
 
 /* Кастомный скроллбар */
 ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
 }
 
 ::-webkit-scrollbar-track {