ui

styles.py

@@ -1,5 +1,5 @@
 CSS = """
-/* Убираем лишние отступы у всего приложения */
+/* 1. Глобальный контейнер на весь экран без скроллов страницы */
 .gradio-container {
     width: 100% !important;
     height: 100vh !important;
@@ -8,55 +8,60 @@ CSS = """
     overflow: hidden !important;
 }
 
-/* Сайдбар на всю высоту */
+/* 2. Основной ряд (Sidebar + Chat) тоже должен быть во весь экран */
+#main-row {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+}
+
+/* 3. Сайдбар */
 .sidebar {
     height: 100vh !important;
     border-right: 1px solid var(--border-color-primary) !important;
+    overflow-y: auto !important;
 }
 
-/*
-   ГЛАВНАЯ КОЛОНКА (ID: col-chat-main)
-   Превращаем её во Flex-контейнер.
-   Она занимает 100% высоты экрана.
-*/
+/* 4. Правая колонка (Чат + Ввод) */
 #col-chat-main {
     height: 100vh !important;
-    max-height: 100vh !important;
     display: flex !important;
     flex-direction: column !important;
-    justify-content: space-between !important;
     padding: 0 !important;
     margin: 0 !important;
     border: none !important;
+    gap: 0 !important; /* Убираем промежутки между чатом и вводом */
 }
 
-/*
-   ЧАТБОТ (ID: chatbot)
-   flex-grow: 1 -> Заставляет чат занять всё доступное пространство.
-   min-height: 0 -> КРИТИЧНО для работы скролла внутри flex-элемента.
+/* 5. ЧАТБОТ - САМОЕ ВАЖНОЕ
+   height: 0 + flex-grow: 1 заставляет его занять всё место,
+   даже если сообщений мало.
 */
 #chatbot {
     flex-grow: 1 !important;
-    height: auto !important;
-    min-height: 0 !important;
-    overflow-y: auto !important;
-    margin: 0 !important;
+    height: 0 !important;       /* Хак для Flexbox */
+    min-height: 0 !important;   /* Разрешает сжиматься/растягиваться */
+    width: 100% !important;
+    overflow-y: auto !important; /* Скролл внутри */
     border: none !important;
-    border-radius: 0 !important;
-    padding-bottom: 10px !important;
+    margin: 0 !important;
 }
 
-/*
-   ЗОНА ВВОДА (ID: input-area)
-   flex-shrink: 0 -> Запрещаем сжиматься.
-   Прижимается к низу автоматически из-за flex-grow у чата.
-*/
+/* Обертка чата внутри Gradio (иногда создает проблемы, фиксим её) */
+#chatbot > .wrapper {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* 6. Поле ввода */
 #input-area {
-    flex-shrink: 0 !important;
+    flex-shrink: 0 !important; /* Не даем сжиматься */
+    width: 100% !important;
     padding: 15px !important;
     background: var(--background-fill-secondary);
     border-top: 1px solid var(--border-color-primary);
-    width: 100% !important;
+    z-index: 10; /* Чтобы быть поверх */
 }
 
 /* Убираем футер */

ui.py

@@ -8,12 +8,11 @@ from styles import CSS
 def create_ui():
     theme = gr.themes.Soft(primary_hue="blue", text_size="lg")
 
-    # fill_height=True помогает Gradio понять, что мы хотим на весь экран
-    with gr.Blocks(
-        theme=theme, css=CSS, title="Qwen Coder Pro", fill_height=True
-    ) as demo:
-        with gr.Row(equal_height=True, variant="default", elem_classes=["main-row"]):
-            # --- ЛЕВАЯ КОЛОНКА (НАСТРОЙКИ) ---
+    # Убрали fill_height=True, полагаемся на наш CSS
+    with gr.Blocks(theme=theme, css=CSS, title="Code LLM") as demo:
+        # Добавили elem_id="main-row"
+        with gr.Row(equal_height=True, variant="default", elem_id="main-row"):
+            # --- ЛЕВАЯ КОЛОНКА ---
             with gr.Sidebar(elem_classes=["sidebar"]):
                 gr.Markdown("### ⚙️ Settings")
                 system_prompt = gr.Textbox(
@@ -29,20 +28,18 @@ def create_ui():
                 )
                 clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
 
-            # --- ПРАВАЯ КОЛОНКА (ЧАТ + ВВОД) ---
-            # elem_id="col-chat-main" связывает эту колонку с Flexbox-стилями в styles.py
+            # --- ПРАВАЯ КОЛОНКА ---
             with gr.Column(scale=1, elem_id="col-chat-main"):
-                # 1. Чат (растянется благодаря flex-grow: 1 в CSS)
+                # Чатбот
                 chatbot = gr.Chatbot(
-                    elem_id="chatbot",  # Важно для CSS
+                    elem_id="chatbot",
                     label="Code Assistant",
                     avatar_images=(None, "https://api.iconify.design/noto:robot.svg"),
                     layout="bubble",
                     render_markdown=True,
-                    scale=1,
                 )
 
-                # 2. Зона ввода (прижмется к низу)
+                # Поле ввода
                 with gr.Row(elem_id="input-area"):
                     msg = gr.Textbox(
                         show_label=False,
@@ -58,21 +55,18 @@ def create_ui():
                     )
 
         # --- СОБЫТИЯ ---
-        # Enter в поле ввода
         msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False).then(
             lambda: set_interactive(False), None, [msg, submit_btn], queue=False
         ).then(
             bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
         ).then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
 
-        # Клик по кнопке Run
         submit_btn.click(user_input, [msg, chatbot], [msg, chatbot], queue=False).then(
             lambda: set_interactive(False), None, [msg, submit_btn], queue=False
         ).then(
             bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
         ).then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
 
-        # Очистка
         clear_btn.click(lambda: [], None, chatbot, queue=False)
 
     return demo