Update app.py

app.py

@@ -189,92 +189,95 @@ with gr.Blocks(title="Qualitative Coding Interface") as demo:
         outputs=[full_transcript_text, status_message, current_file_id, coded_data_state]
     )
     
-    gr.Markdown("---")
-    gr.Markdown("## 📝 Interview Metadata")
-    
-    # Create textboxes for each metadata field
-    metadata_inputs = []
-    with gr.Row():
-        for key, label in METADATA_FIELDS.items():
-            metadata_inputs.append(gr.Textbox(label=label, value="", max_lines=1, interactive=True))
-
-    gr.Markdown("---")
-    
-    # --- B. TRANSCRIPT VIEW ---
-    gr.Markdown("## 📖 Transcript")
-    
-    # Display the full text (non-interactive so users copy from it)
-    transcript_display = gr.Textbox(
-        label="Transcript Content (Read-only - Copy segments from here)",
-        lines=15, 
-        interactive=False, 
-        value="",
-        elem_id="transcript-display"
-    )
-    # Update the transcript display whenever the hidden state changes
-    full_transcript_text.change(lambda x: x, inputs=full_transcript_text, outputs=transcript_display)
+    # --- MAIN CONTENT COLUMN (FIX) ---
+    # Placing the rest of the UI inside a Column ensures proper vertical layout rendering
+    with gr.Column():
+        gr.Markdown("---")
+        gr.Markdown("## 📝 Interview Metadata")
+        
+        # Create textboxes for each metadata field
+        metadata_inputs = []
+        with gr.Row():
+            for key, label in METADATA_FIELDS.items():
+                metadata_inputs.append(gr.Textbox(label=label, value="", max_lines=1, interactive=True))
 
-    gr.Markdown("---")
-    
-    # --- C. CODING/TAGGING CONTROLS ---
-    gr.Markdown("## 🏷️ Apply Code")
-    with gr.Row():
-        segment_input = gr.Textbox(
-            label="Segment to Code (Paste the text you copied from above)", 
-            lines=3,
-            scale=3
-        )
-        code_dropdown = gr.Dropdown(
-            label="Select Code/Tag", 
-            choices=DEFAULT_CODES, 
-            scale=1
+        gr.Markdown("---")
+        
+        # --- B. TRANSCRIPT VIEW ---
+        gr.Markdown("## 📖 Transcript")
+        
+        # Display the full text (non-interactive so users copy from it)
+        transcript_display = gr.Textbox(
+            label="Transcript Content (Read-only - Copy segments from here)",
+            lines=15, 
+            interactive=False, 
+            value="",
+            elem_id="transcript-display"
         )
+        # Update the transcript display whenever the hidden state changes
+        full_transcript_text.change(lambda x: x, inputs=full_transcript_text, outputs=transcript_display)
+
+        gr.Markdown("---")
         
-    code_btn = gr.Button("Apply Code & Save Segment", variant="primary")
-    
-    # --- D. CODED DATA & DOWNLOAD ---
-    gr.Markdown("---")
-    gr.Markdown("## 📊 Coded Data")
-    
-    # FIX: Removed the 'height=300' argument which caused the TypeError
-    coded_output_df = gr.Dataframe(
-        label="Current Coded Segments", 
-        interactive=False,
-    )
-    # Update the dataframe display whenever the hidden state changes
-    coded_data_state.change(lambda x: x, inputs=coded_data_state, outputs=coded_output_df)
+        # --- C. CODING/TAGGING CONTROLS ---
+        gr.Markdown("## 🏷️ Apply Code")
+        with gr.Row():
+            segment_input = gr.Textbox(
+                label="Segment to Code (Paste the text you copied from above)", 
+                lines=3,
+                scale=3
+            )
+            code_dropdown = gr.Dropdown(
+                label="Select Code/Tag", 
+                choices=DEFAULT_CODES, 
+                scale=1
+            )
+            
+        code_btn = gr.Button("Apply Code & Save Segment", variant="primary")
+        
+        # --- D. CODED DATA & DOWNLOAD ---
+        gr.Markdown("---")
+        gr.Markdown("## 📊 Coded Data")
+        
+        # FIX: Removed the 'height=300' argument
+        coded_output_df = gr.Dataframe(
+            label="Current Coded Segments", 
+            interactive=False,
+        )
+        # Update the dataframe display whenever the hidden state changes
+        coded_data_state.change(lambda x: x, inputs=coded_data_state, outputs=coded_output_df)
 
-    with gr.Row():
-        download_btn = gr.Button("Download Codes as XLSX", variant="secondary")
-        download_file = gr.File(label="Download File", visible=False) # Keep hidden until ready
+        with gr.Row():
+            download_btn = gr.Button("Download Codes as XLSX", variant="secondary")
+            download_file = gr.File(label="Download File", visible=False) # Keep hidden until ready
 
-    # --- E. ACTION BINDINGS ---
-    
-    # 1. Apply Code Button Logic
-    code_btn.click(
-        fn=apply_code,
-        inputs=[
-            coded_data_state, 
-            current_file_id, 
-            full_transcript_text,
-            segment_input, 
-            code_dropdown,
-            gr.List(metadata_inputs) # Pass all metadata inputs as a list
-        ],
-        outputs=[coded_data_state, status_message]
-    )
-    
-    # 2. Download Button Logic
-    download_btn.click(
-        fn=generate_excel,
-        inputs=coded_data_state,
-        outputs=[download_file, status_message]
-    ).then(
-        # Make the file visible after generation
-        lambda x: gr.update(visible=True) if x[0] else gr.update(visible=False), 
-        inputs=[download_file],
-        outputs=[download_file]
-    )
+        # --- E. ACTION BINDINGS ---
+        
+        # 1. Apply Code Button Logic
+        code_btn.click(
+            fn=apply_code,
+            inputs=[
+                coded_data_state, 
+                current_file_id, 
+                full_transcript_text,
+                segment_input, 
+                code_dropdown,
+                gr.List(metadata_inputs) # Pass all metadata inputs as a list
+            ],
+            outputs=[coded_data_state, status_message]
+        )
+        
+        # 2. Download Button Logic
+        download_btn.click(
+            fn=generate_excel,
+            inputs=coded_data_state,
+            outputs=[download_file, status_message]
+        ).then(
+            # Make the file visible after generation
+            lambda x: gr.update(visible=True) if x[0] else gr.update(visible=False), 
+            inputs=[download_file],
+            outputs=[download_file]
+        )
 
 
 # Launch the app