Fix mobile layout overflow

app.py

@@ -167,6 +167,7 @@ CUSTOM_CSS = """
 }
 .edit-type-selector .wrap {
   gap: 0.45rem;
+  flex-wrap: wrap;
 }
 .edit-type-selector label {
   border-radius: 8px !important;
@@ -192,8 +193,10 @@ footer {
 }
 @media (max-width: 900px) {
   .gradio-container {
+    padding-top: 52px !important;
     padding-left: 14px !important;
     padding-right: 14px !important;
+    overflow-x: hidden !important;
   }
   .ea-output-column {
     position: static;
@@ -571,7 +574,7 @@ with gr.Blocks(
     )
 
     with gr.Row():
-        with gr.Column(scale=1, min_width=420):
+        with gr.Column(scale=1, min_width=320):
             gr.Markdown("## Inputs", elem_classes=["ea-column-title"])
             mode_hint = gr.Markdown(_mode_hint(MODE_PROMPT), elem_classes=["ea-hint"])
             mode = gr.Dropdown(
@@ -620,7 +623,7 @@ with gr.Blocks(
                     label="Source/reference attention",
                 )
             run = gr.Button("Generate edited video", variant="primary", elem_classes=["ea-generate"])
-        with gr.Column(scale=1, min_width=420, elem_classes=["ea-output-column"]):
+        with gr.Column(scale=1, min_width=320, elem_classes=["ea-output-column"]):
             gr.Markdown("## Output", elem_classes=["ea-column-title"])
             video_out = gr.Video(label="Edited video", height=300)
             with gr.Accordion("Generation details", open=False):