Fluid layout (no max-width) to remove dark side bars

app.py

@@ -85,28 +85,32 @@ THEME_CSS = """
 }
 
 /* Gradio container reset (Gradio 5 selectors) */
-gradio-app, .gradio-container, .main, .app, .contain, .wrap {
+html, body, gradio-app, .gradio-container, .main, .app, .contain, .wrap,
+gradio-app > .main, gradio-app .gradio-container {
   background: var(--surface) !important;
   color: var(--ink) !important;
   font-family: var(--font) !important;
 }
+/* Fluid container — no max-width, fills the entire iframe to remove
+   the dark side bars that appeared when content was capped at 1600px. */
 .gradio-container {
-  max-width: 1600px !important;
+  max-width: none !important;
   width: 100% !important;
-  margin: 0 auto !important;
-  padding: 32px 40px 60px !important;
-  min-height: 920px !important;
+  margin: 0 !important;
+  padding: 28px 48px 48px !important;
+  min-height: 100vh !important;
   box-sizing: border-box;
 }
 
-/* Two-column rectangular layout — 16:9-ish aspect, fixed feel */
+/* Two-column rectangular layout */
 .split-layout {
   display: grid;
-  grid-template-columns: minmax(360px, 460px) 1fr;
-  gap: 36px;
-  align-items: start;
-  min-height: 820px;
+  grid-template-columns: minmax(360px, 440px) 1fr;
+  gap: 32px;
+  align-items: stretch;
+  min-height: 720px;
 }
+
 @media (max-width: 900px) {
   .split-layout { grid-template-columns: 1fr; gap: 22px; min-height: auto; }
   .gradio-container { padding: 24px 18px 60px !important; min-height: auto !important; }