Optimize Web UI for mobile: fix logo overlap and responsive layout

scraibe/webui.py

@@ -112,33 +112,49 @@ def create_app():
     # Build Gradio interface
     with gr.Blocks(
         title=webui_title,
+        css="""
+            /* Responsive layout: stack columns on smaller screens */
+            @media (max-width: 850px) {
+                .gradio-container {
+                    max-width: 100% !important;
+                }
+                #main-row .gr-row {
+                    flex-direction: column !important;
+                }
+                #main-row .gr-col {
+                    width: 100% !important;
+                    max-width: 100% !important;
+                    flex: none !important;
+                }
+            }
+        """,
     ) as app:
 
         # Header
         if header_html:
             gr.HTML(header_html)
 
-        with gr.Row():
-            with gr.Column(scale=2):
+        with gr.Row(elem_id="main-row"):
+            with gr.Column():
                 audio_input = gr.Audio(
                     label="Upload or record audio",
                     type="filepath",
                 )
 
-                with gr.Row():
-                    task_choice = gr.Radio(
-                        choices=[
-                            ("Transcribe", "transcribe"),
-                            ("Transcript & Summarize", "transcript_and_summarize"),
-                        ],
-                        value="transcribe",
-                        label="Task",
-                    )
+                task_choice = gr.Radio(
+                    choices=[
+                        ("Transcribe", "transcribe"),
+                        ("Transcript & Summarize", "transcript_and_summarize"),
+                    ],
+                    value="transcribe",
+                    label="Task",
+                    container=True,
+                )
 
                 identify_speakers = gr.Checkbox(
                     label="Identify speakers (best effort using AI)",
                     value=False,
-                    info="If enabled, AI will attempt to infer real names for speakers and replace Speaker 1/2/etc. in the transcript."
+                    info="If enabled, AI will attempt to infer real names for speakers and replace Speaker 1/2/etc. in the transcript.",
                 )
 
                 with gr.Row():
@@ -151,7 +167,6 @@ def create_app():
                         precision=0,
                     )
 
-                # Email is required in async mode
                 email_to = gr.Textbox(
                     label="Your email address (required)",
                     placeholder="e.g. your.name@example.com",
@@ -164,7 +179,7 @@ def create_app():
 
                 submit_btn = gr.Button("Submit for transcription", variant="primary")
 
-            with gr.Column(scale=3):
+            with gr.Column():
                 status_text = gr.Textbox(
                     label="Status",
                     lines=6,
@@ -292,6 +307,25 @@ def create_app():
         body {{
             font-family: Arial, sans-serif;
         }}
+        /* Mobile-friendly adjustments */
+        @media (max-width: 700px) {{
+            .gradio-container {{
+                padding: 0 4px !important;
+            }}
+            .gradio-container .gr-row {{
+                flex-direction: column !important;
+                gap: 8px !important;
+            }}
+            .gradio-container .gr-col {{
+                width: 100% !important;
+                max-width: 100% !important;
+                flex: none !important;
+            }}
+            .gradio-container button.primary {{
+                width: 100% !important;
+                box-sizing: border-box;
+            }}
+        }}
     """
 
     app.launch(