Update app.py

app.py

@@ -679,26 +679,29 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
                         m_ai_just_st = gr.State("") 
                         m_ig_json_st = gr.State("")
                         
-                        with gr.Row(equal_height=True):
+                        # ADDED wrap=True to allow elements to stack vertically on smaller screens
+                        with gr.Row(equal_height=True, wrap=True):
                             b_text = gr.Textbox(
                                                 label=f"Target B", 
                                                 interactive=False, 
                                                 scale=4, 
-                                                min_width=200, 
+                                                min_width=280, # Increased for better text readability on mobile
                                                 elem_classes="scrollable-target" 
                                             )
-                            rel_radio = gr.Radio(choices=["coherent", "neutral", "incoherent"], label="1. Class", scale=2, min_width=120)
+                            rel_radio = gr.Radio(choices=["coherent", "neutral", "incoherent"], label="1. Class", scale=2, min_width=160)
                             
-                            with gr.Column(scale=1):
+                            with gr.Column(scale=1, min_width=120): # Added min_width so the horizontal bars don't squish
                                 conf_md = gr.Markdown("")
                             
-                            inter_dd = gr.Dropdown(choices=[], label="2. Drill Down Interaction", interactive=True, scale=3, min_width=150)
-                            with gr.Column(scale=3, min_width=200):
+                            inter_dd = gr.Dropdown(choices=[], label="2. Drill Down Interaction", interactive=True, scale=3, min_width=180)
+                            
+                            with gr.Column(scale=4, min_width=300): # Ensured the Justification box has enough minimum space
                                 explain_btn = gr.Button("✨ AI Explainability & Justification", size="sm", elem_classes="explain-btn")
                                 explain_html = gr.HTML("")
-                                with gr.Row():
-                                    just_box = gr.Textbox(label="3. Justification", placeholder="Compulsory reasoning...", lines=3, max_lines=150, scale=4)
-                                    clear_row_btn = gr.Button("🗑️ Clear", size="sm", variant="stop", scale=1)
+                                # ADDED wrap=True to the inner row to prevent the clear button from overlapping the text box on tiny screens
+                                with gr.Row(wrap=True): 
+                                    just_box = gr.Textbox(label="3. Justification", placeholder="Compulsory reasoning...", lines=3, max_lines=150, scale=4, min_width=200)
+                                    clear_row_btn = gr.Button("🗑️ Clear", size="sm", variant="stop", scale=1, min_width=80)
                                     
                                 explain_btn.click(
                                     fn=generate_row_explanation,