Update app.py

app.py

@@ -326,6 +326,7 @@ def get_video_qualities(video_url):
 utils.colab_check = lambda: True
 
 custom_css = """
+    /* Root styles */
     :root {
         --primary-hue: 210;
         --secondary-hue: 160;
@@ -336,11 +337,35 @@ custom_css = """
         --text-color: hsl(var(--neutral-hue), 0%, 20%);
         --border-radius: 8px;
     }
-    body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; height: 100vh; overflow: hidden; }
-    #component-0 { height: 100vh; overflow-y: auto; padding: 1rem; box-sizing: border-box; }
-    .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; }
-    .header { text-align: center; margin-bottom: 1rem; }
-    .main-content { display: flex; flex-wrap: wrap; gap: 1rem; flex-grow: 1; overflow-y: auto; max-height: calc(100vh - 150px); }
+
+    /* Body and main container */
+    body, #component-0 {
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    /* Gradio container */
+    .gradio-container {
+        width: 100%;
+        max-width: 100%;
+        padding: 0;
+        margin: 0 auto;
+    }
+
+    /* Main content area */
+    .main-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        height: calc(100vh - 80px); /* Adjust based on your header height */
+        overflow-y: auto;
+        padding: 1rem;
+        box-sizing: border-box;
+    }
+
+    /* Individual sections */
     .input-section, .segment-controls, .options-section, .output-section {
         background-color: var(--neutral-color);
         border-radius: var(--border-radius);
@@ -350,6 +375,18 @@ custom_css = """
         max-height: 100%;
         overflow-y: auto;
     }
+
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .main-content {
+            flex-direction: column;
+        }
+        .input-section, .segment-controls, .options-section, .output-section {
+            flex: 1 1 auto;
+        }
+    }
+
+    /* Other styles (unchanged) */
     .segment-input, .time-input, .button-row {
         display: flex;
         flex-wrap: wrap;
@@ -359,10 +396,6 @@ custom_css = """
     .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; }
-    @media (max-width: 768px) {
-        .main-content { flex-direction: column; }
-        .input-section, .segment-controls, .options-section, .output-section { flex: 1 1 100%; }
-    }
     .url-input { flex-grow: 1; }
     .quality-dropdown { width: 100px !important; }
 """
@@ -383,61 +416,60 @@ with gr.Blocks(
     ),
     css=custom_css
 ) as iface:
-    with gr.Column(elem_classes="container"):
-        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.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")
-                        
-                        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")
-                    
-                    add_btn = gr.Button("Add Segment", variant="primary")
-                
-                segments = gr.Dataframe(
-                    headers=["Segment"],
-                    row_count=3,
-                    col_count=1,
-                    datatype=["str"],
+    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,
-                    label="Segments"
+                    elem_classes="quality-dropdown",
+                    visible=False
                 )
+            url_status = gr.Markdown(visible=False)
             
-            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")
+            with gr.Column(elem_classes="segment-controls"):
+                gr.Markdown("### Add Segments", elem_classes="time-label")
+                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")
+                    
+                    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")
                 
-                submit_btn = gr.Button("🚀 Download", variant="primary")
+                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"
+            )
         
+        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.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)