Update app.py

app.py

@@ -326,154 +326,117 @@ def get_video_qualities(video_url):
 utils.colab_check = lambda: True
 
 custom_css = """
-    /* Root styles */
-    :root {
-        --primary-hue: 210;
-        --secondary-hue: 160;
-        --neutral-hue: 0;
-        --primary-color: hsl(var(--primary-hue), 70%, 55%);
-        --secondary-color: hsl(var(--secondary-hue), 70%, 55%);
-        --neutral-color: hsl(var(--neutral-hue), 0%, 95%);
-        --text-color: hsl(var(--neutral-hue), 0%, 20%);
-        --border-radius: 8px;
-    }
-
-    /* Body and main container */
+    /* Reset and base styles */
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
     body, #component-0 {
-        margin: 0;
-        padding: 0;
         height: 100vh;
+        max-height: 100vh;
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
     }
-
-    /* Gradio container */
+    
+    /* Gradio container modifications */
     .gradio-container {
-        width: 100%;
-        max-width: 100%;
-        padding: 0;
-        margin: 0 auto;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        max-height: 100vh;
+        overflow: hidden;
     }
-
+    
+    /* Header */
+    .header {
+        padding: 1rem;
+        background-color: #f0f0f0;
+    }
+    
     /* Main content area */
     .main-content {
+        flex-grow: 1;
         display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-        height: calc(100vh - 80px); /* Adjust based on your header height */
-        overflow-y: auto;
+        overflow: hidden;
         padding: 1rem;
-        box-sizing: border-box;
+        gap: 1rem;
     }
-
-    /* Individual sections */
-    .input-section, .segment-controls, .options-section, .output-section {
-        background-color: var(--neutral-color);
-        border-radius: var(--border-radius);
-        padding: 1rem;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        flex: 1 1 300px;
-        max-height: 100%;
+    
+    /* Columns */
+    .input-section, .options-section, .output-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    
+    /* Scrollable areas */
+    .scroll-area {
+        flex-grow: 1;
         overflow-y: auto;
+        padding: 1rem;
     }
-
-    /* Responsive design */
+    
+    /* Responsive adjustments */
     @media (max-width: 768px) {
         .main-content {
             flex-direction: column;
         }
-        .input-section, .segment-controls, .options-section, .output-section {
-            flex: 1 1 auto;
-        }
     }
-
-    /* Other styles (unchanged) */
+    
+    /* Additional styles */
     .segment-input, .time-input, .button-row {
         display: flex;
-        flex-wrap: wrap;
         gap: 0.5rem;
-        align-items: center;
+        margin-bottom: 1rem;
     }
-    .time-input { width: 60px !important; text-align: center; }
-    .time-label, .separator { font-weight: bold; color: var(--primary-color); margin-bottom: 0.5rem; }
-    .button-row { justify-content: space-between; }
+    .time-input { width: 60px !important; }
     .url-input { flex-grow: 1; }
     .quality-dropdown { width: 100px !important; }
 """
 
-with gr.Blocks(
-    title="YouTube Segment Downloader",
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="green",
-        neutral_hue="gray"
-    ).set(
-        body_text_color="*neutral_800",
-        background_fill_primary="*neutral_50",
-        button_primary_background_fill="*primary_500",
-        button_primary_background_fill_hover="*primary_600",
-        button_secondary_background_fill="*secondary_500",
-        button_secondary_background_fill_hover="*secondary_600",
-    ),
-    css=custom_css
-) as iface:
+with gr.Blocks(title="YouTube Segment Downloader", theme=gr.themes.Default(), css=custom_css) as iface:
     gr.Markdown("# 🎬 YouTube Segment Downloader", elem_classes="header")
     
     with gr.Row(elem_classes="main-content"):
         with gr.Column(elem_classes="input-section"):
-            with gr.Row():
-                video_url = gr.Textbox(
-                    label="YouTube URL",
-                    placeholder="Paste URL here",
-                    elem_classes="url-input"
-                )
-                quality = gr.Dropdown(
-                    label="Quality",
-                    choices=[],
-                    interactive=True,
-                    elem_classes="quality-dropdown",
-                    visible=False
-                )
-            url_status = gr.Markdown(visible=False)
-            
-            with gr.Column(elem_classes="segment-controls"):
-                gr.Markdown("### Add Segments", elem_classes="time-label")
+            with gr.Box(elem_classes="scroll-area"):
+                with gr.Row():
+                    video_url = gr.Textbox(label="YouTube URL", placeholder="Paste URL here", elem_classes="url-input")
+                    quality = gr.Dropdown(label="Quality", choices=[], interactive=True, elem_classes="quality-dropdown", visible=False)
+                url_status = gr.Markdown(visible=False)
+                
+                gr.Markdown("### Add Segments")
                 with gr.Row(elem_classes="segment-input"):
                     start_hours = gr.Number(label="Start HH", minimum=0, maximum=23, step=1, value=0, elem_classes="time-input")
                     start_minutes = gr.Number(label="MM", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
                     start_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
-                    
-                    gr.Markdown("to", elem_classes="separator")
-                    
+                    gr.Markdown("to")
                     end_hours = gr.Number(label="End HH", minimum=0, maximum=23, step=1, value=0, elem_classes="time-input")
                     end_minutes = gr.Number(label="MM", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
-                    end_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time_input")
+                    end_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
                 
                 add_btn = gr.Button("Add Segment", variant="primary")
-            
-            segments = gr.Dataframe(
-                headers=["Segment"],
-                row_count=3,
-                col_count=1,
-                datatype=["str"],
-                interactive=True,
-                label="Segments"
-            )
-        
+                segments = gr.Dataframe(headers=["Segment"], row_count=3, col_count=1, datatype=["str"], interactive=True, label="Segments")
+
         with gr.Column(elem_classes="options-section"):
-            combine = gr.Checkbox(label="Combine segments", value=True)
-            audio_only = gr.Checkbox(label="Audio only", value=False)
-            remove_index = gr.Number(label="Remove segment", minimum=0, step=1, value=0)
-            remove_btn = gr.Button("Remove", variant="secondary")
-            old_index = gr.Number(label="Move from", minimum=0, step=1, value=0)
-            new_index = gr.Number(label="to", minimum=0, step=1, value=0)
-            move_btn = gr.Button("Move", variant="secondary")
-            
-            submit_btn = gr.Button("🚀 Download", variant="primary")
-    
+            with gr.Box(elem_classes="scroll-area"):
+                combine = gr.Checkbox(label="Combine segments", value=True)
+                audio_only = gr.Checkbox(label="Audio only", value=False)
+                remove_index = gr.Number(label="Remove segment", minimum=0, step=1, value=0)
+                remove_btn = gr.Button("Remove", variant="secondary")
+                old_index = gr.Number(label="Move from", minimum=0, step=1, value=0)
+                new_index = gr.Number(label="to", minimum=0, step=1, value=0)
+                move_btn = gr.Button("Move", variant="secondary")
+                submit_btn = gr.Button("🚀 Download", variant="primary")
+
         with gr.Column(elem_classes="output-section"):
-            progress = gr.Slider(label="Progress", minimum=0, maximum=100, step=1, interactive=False)
-            status = gr.Textbox(label="Status", lines=1)
-            output_file = gr.File(label="Downloaded File")
+            with gr.Box(elem_classes="scroll-area"):
+                progress = gr.Slider(label="Progress", minimum=0, maximum=100, step=1, interactive=False)
+                status = gr.Textbox(label="Status", lines=1)
+                output_file = gr.File(label="Downloaded File")
 
     add_btn.click(
         add_segment,