fix: layout width and output box height visibility issues

app.py

@@ -226,7 +226,7 @@ body {
 .gradio-container {
     font-family: 'Inter', sans-serif !important;
     background: radial-gradient(circle at top left, #1e1b4b, #0f172a) !important;
-    max-width: 1200px !important;
+    max-width: 95% !important; /* Increased width for better split view */
 }
 
 /* Force all text to be light by default to combat Gradio's light theme defaults */
@@ -234,7 +234,35 @@ body {
     color: var(--text-light);
 }
 
-/* Title & Header */
+/* ... (keep existing styles) ... */
+
+/* Output Box Styling - Fixed Height */
+.output-textbox, .markdown-box {
+    height: 600px !important;
+    max-height: 600px !important;
+    overflow-y: auto !important;
+    background-color: #1e293b !important;
+    border: 1px solid #64748b !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+}
+
+.output-textbox textarea {
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    height: 100% !important;
+    color: #ffffff !important;
+}
+
+.markdown-box {
+    background-color: #f8fafc !important; /* Light background for markdown readability */
+    color: #0f172a !important; /* Dark text for markdown */
+}
+
+.markdown-box * {
+    color: #0f172a !important;
+}
 .main-title {
     font-family: 'Inter', sans-serif !important;
     font-weight: 800 !important;
@@ -503,6 +531,7 @@ with gr.Blocks(title="UltraData Math Parser", css=custom_css, theme=gr.themes.So
             with gr.Tabs():
                 with gr.TabItem("✨ Markdown"):
                     markdown_output = gr.Markdown(
+                        value="### Output will appear here...",
                         label="Markdown Preview",
                         elem_classes=["markdown-box"],
                         latex_delimiters=[