fix layout err

app.py

@@ -306,7 +306,16 @@ def transcribe_sense(model_id: str,
 
 
 # —————— Gradio UI ——————
-Demo = gr.Blocks()
+DEMO_CSS = """
+.diar {
+  min-height: 100px !important;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px;
+  border: 1px solid #444;
+}
+"""
+Demo = gr.Blocks(css=DEMO_CSS)
 with Demo:
     gr.Markdown("## Whisper vs. SenseVoice (Language, Device & Diarization with Simplified→Traditional Chinese)")
 
@@ -330,7 +339,7 @@ with Demo:
             device_radio = gr.Radio(choices=["GPU", "CPU"], value="GPU", label="Device")
             diar_check = gr.Checkbox(label="Enable Diarization", value=True)
             out_w = gr.Textbox(label="Transcript", visible=False)
-            out_w_d = gr.HTML(label="Diarized Transcript", visible=True)
+            out_w_d = gr.HTML(label="Diarized Transcript", visible=True, elem_classes=["diar"])
             # Toggle visibility based on checkbox
             diar_check.change(lambda e: gr.update(visible=not e), inputs=diar_check, outputs=out_w)
             diar_check.change(lambda e: gr.update(visible=e), inputs=diar_check, outputs=out_w_d)
@@ -347,7 +356,7 @@ with Demo:
             punct_chk = gr.Checkbox(label="Enable Punctuation", value=True)
             diar_s_chk = gr.Checkbox(label="Enable Diarization", value=True)
             out_s = gr.Textbox(label="Transcript", visible=False)
-            out_s_d = gr.HTML(label="Diarized Transcript", visible=True)
+            out_s_d = gr.HTML(label="Diarized Transcript", visible=True, elem_classes=["diar"])
             # Toggle visibility
             diar_s_chk.change(lambda e: gr.update(visible=not e), inputs=diar_s_chk, outputs=out_s)
             diar_s_chk.change(lambda e: gr.update(visible=e), inputs=diar_s_chk, outputs=out_s_d)