Fix: Improve Session ID input layout using Gradio Blocks pattern - Remove gr.Row() wrapper to allow full width usage - Improve CSS selectors for Textbox container and input elements - Follow official Gradio Blocks documentation pattern

CodeWeaver/ui/app.py

@@ -46,16 +46,25 @@ CSS = """
 }
 .message { font-size: 1.1rem; line-height: 1.6; }
 /* Session ID 입력 필드 - elem_id로 정확히 타겟팅 */
+/* Gradio Blocks 문서 참고: 전체 너비 사용을 위한 스타일 */
 #session_id_input {
     width: 100% !important;
     min-width: 0 !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
 }
-#session_id_input input,
+/* Textbox 내부 input 요소 스타일 */
+#session_id_input input[type="text"],
 #session_id_input textarea {
     width: 100% !important;
     min-width: 0 !important;
+    box-sizing: border-box !important;
+}
+/* Textbox 컨테이너 스타일 */
+#session_id_input.form,
+#session_id_input > .form {
+    width: 100% !important;
+    max-width: 100% !important;
 }
 /* 멈춤 버튼 숨기기 및 클릭 비활성화 */
 button[aria-label*="Stop"],
@@ -167,16 +176,15 @@ def create_demo() -> gr.Blocks:
             """)
 
         # 2. Session ID 입력창
-        with gr.Row():
-            session_id_input = gr.Textbox(
-                label="Session ID (이 ID가 같으면 대화가 유지됩니다)",
-                value=str(uuid.uuid4()),
-                interactive=True,
-                placeholder="세션 ID를 입력하거나 그대로 두세요",
-                elem_id="session_id_input",  # CSS 타겟팅용
-                container=True,  # 레이블 표시 보장
-                scale=10  # Row 내에서 상대적 크기
-            )
+        # Gradio Blocks 문서 참고: Row 없이 직접 배치하여 전체 너비 사용
+        session_id_input = gr.Textbox(
+            label="Session ID (이 ID가 같으면 대화가 유지됩니다)",
+            value=str(uuid.uuid4()),
+            interactive=True,
+            placeholder="세션 ID를 입력하거나 그대로 두세요",
+            elem_id="session_id_input",  # CSS 타겟팅용
+            container=True  # 레이블 표시 보장
+        )
         
         # 3. 채팅 인터페이스
         # Chatbot 객체를 먼저 생성하여 clear 이벤트를 바인딩