Update app.py

app.py

@@ -5,18 +5,68 @@ from pathlib import Path
 
 # Clean, simple CSS
 custom_css = """
+/* Prevent body scrolling */
+body {
+    overflow: hidden !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Main app container */
+#component-0,
+.gradio-container > div:first-child {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+}
+
 /* Clean modern design */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: #1a1a2e;
     color: #eee;
+    height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+    padding: 0 !important;
+}
+
+/* Make columns full height */
+.gradio-container .gr-column {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Main row container */
+.gradio-container .gr-row {
+    height: 100vh;
+    max-height: 100vh;
+    overflow: hidden;
+}
+
+/* File columns specific styling */
+.file-column {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* File panel container fix */
+.file-panel-container {
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
 }
 
 /* File panel styling */
 .file-panel {
     background: #16213e !important;
     border-right: 1px solid #0f3460;
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -70,6 +120,19 @@ custom_css = """
 .main-content {
     padding: 30px;
     background: #1a1a2e;
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+/* Main title styling */
+.main-title {
+    text-align: center !important;
+}
+
+.main-title h1 {
+    text-align: center !important;
+    margin: 0 0 20px 0 !important;
 }
 
 /* Control styling */
@@ -129,6 +192,25 @@ custom_css = """
     text-align: center !important;
 }
 
+/* Center slider labels more specifically */
+.gr-slider label,
+.gr-form label span,
+.gr-input-label,
+.gr-block.gr-box label,
+.gr-block label.block,
+div[data-testid="block-label"] {
+    text-align: center !important;
+    display: block !important;
+    width: 100% !important;
+    margin: 0 auto !important;
+}
+
+/* Additional slider label centering */
+.gr-form .gr-input-label,
+.gr-box .gr-form label {
+    justify-content: center !important;
+}
+
 /* Hide default Gradio label styling */
 .gr-form {
     background: transparent !important;
@@ -432,7 +514,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
     
     with gr.Row():
         # Left panel - Input files (1/4 width)
-        with gr.Column(scale=1, min_width=250):
+        with gr.Column(scale=1, min_width=250, elem_classes="file-column"):
             input_file_panel = gr.HTML(
                 value=create_input_file_panel_html([]),
                 elem_classes="file-panel-container"
@@ -442,7 +524,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
         with gr.Column(scale=2, elem_classes="main-content"):
             
             # Header
-            gr.Markdown("# 🎸 NAM Garden Audio Processor")
+            gr.Markdown("# 🎸 NAM Garden Audio Processor", elem_classes="main-title")
             
             # Model Selection
             with gr.Group(elem_classes="control-group"):
@@ -518,7 +600,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
             )
         
         # Right panel - Processed files (1/4 width)
-        with gr.Column(scale=1, min_width=250):
+        with gr.Column(scale=1, min_width=250, elem_classes="file-column"):
             processed_file_panel = gr.HTML(
                 value=create_processed_file_panel_html([]),
                 elem_classes="file-panel-container"