Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 
 projects = [
@@ -13,7 +12,7 @@ projects = [
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-/* PERFECT RESPONSIVE BACKGROUND */
+/* PERFECT HF SPACES BACKGROUND */
 .gradio-container {
     background: linear-gradient(rgba(10,10,26,0.92), rgba(45,27,105,0.92)),
                 url('https://tse4.explicit.bing.net/th/id/OIP.CSOmF_Va1tPzTClwWuugnwHaEK?pid=Api&h=220&P=0') center/cover no-repeat !important;
@@ -21,7 +20,6 @@ css = """
     min-height: 100vh !important;
     color: white !important;
     padding: 0 !important;
-    margin: 0 !important;
 }
 
 /* WHITE TEXT EVERYWHERE */
@@ -31,14 +29,7 @@ css = """
     background: transparent !important;
 }
 
-/* MOBILE SCROLL FIX */
-html, body {
-    overflow-x: hidden !important;
-    overflow-y: auto !important;
-    height: 100% !important;
-}
-
-/* PERFECT CENTERING */
+/* MOBILE SCROLL + CENTER */
 .center-content {
     display: flex !important;
     flex-direction: column !important;
@@ -46,10 +37,7 @@ html, body {
     justify-content: flex-start !important;
     text-align: center !important;
     width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 auto !important;
     padding: 1rem !important;
-    min-height: 100vh !important;
     box-sizing: border-box !important;
 }
 
@@ -90,10 +78,9 @@ html, body {
     box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6) !important;
 }
 
-/* MOBILE VIDEO FIX - FULL RESPONSIVE */
+/* VIDEOS */
 .video-container {
     width: 100% !important;
-    max-width: 100% !important;
     margin: 1rem 0 !important;
 }
 .video-container video {
@@ -102,7 +89,6 @@ html, body {
     max-height: 350px !important;
     border-radius: 16px !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
-    display: block !important;
 }
 
 /* HEADER */
@@ -114,55 +100,23 @@ html, body {
     box-shadow: 0 25px 50px rgba(102, 126, 234, 0.5) !important;
     margin: 2rem auto !important;
     max-width: 90% !important;
-    color: white !important;
 }
 
-/* TABS WHITE + MOBILE */
-.gradio-tabs, .tab-header, .tab-content, .tab-button { 
-    color: white !important; 
-    background: transparent !important;
-}
-.tab-item { 
-    color: white !important; 
-    min-height: 60vh !important;
-}
+/* TABS + MOBILE */
+.gradio-tabs, .tab-header, .tab-content, .tab-button { color: white !important; }
+.tab-item { min-height: 60vh !important; color: white !important; }
 
-/* MOBILE PERFECTION */
 @media (max-width: 768px) {
-    .gradio-container { padding: 0 !important; margin: 0 !important; }
-    .center-content { 
-        padding: 1rem !important; 
-        width: 100vw !important; 
-        max-width: 100vw !important;
-        overflow-y: auto !important;
-    }
-    .demo-btn { 
-        padding: 1rem 1.5rem !important; 
-        font-size: 1rem !important; 
-        max-width: 90vw !important;
-    }
-    .video-container video { 
-        max-height: 280px !important; 
-        width: 100% !important; 
-        height: auto !important;
-    }
-    .header-gradient { 
-        padding: 2rem 1rem !important; 
-        margin: 1rem 0 !important; 
-        max-width: 95vw !important;
-    }
-    .glass-card { 
-        padding: 1.5rem 1rem !important; 
-        margin: 0.5rem 0 !important;
-    }
-    .tab-item { min-height: 70vh !important; }
+    .center-content { padding: 1rem !important; width: 100vw !important; }
+    .demo-btn { padding: 1rem 1.5rem !important; font-size: 1rem !important; max-width: 90vw !important; }
+    .video-container video { max-height: 280px !important; }
+    .header-gradient { padding: 2rem 1rem !important; max-width: 95vw !important; }
+    .glass-card { padding: 1.5rem 1rem !important; }
 }
-
-/* PREVENT HORIZONTAL SCROLL */
-* { max-width: 100% !important; box-sizing: border-box !important; }
 """
 
-with gr.Blocks(css=css, height=1000) as demo:
+# **FIXED: Gradio 6.0 - css in launch()**
+with gr.Blocks() as demo:
     # HEADER
     with gr.Column(elem_classes="center-content"):
         gr.Markdown(
@@ -170,34 +124,34 @@ with gr.Blocks(css=css, height=1000) as demo:
             elem_classes="header-gradient glass-card"
         )
     
-    # TABS WITH VIDEOS THAT WORK
+    # TABS
     with gr.Tabs(elem_classes="center-content"):
         for proj in projects:
             with gr.TabItem(proj["name"]):
                 with gr.Column(elem_classes="glass-card center-content"):
-                    # TITLE
-                    gr.Markdown(f"# 🚀 **{proj['name']}**", elem_classes="center-content")
-                    
-                    # DESCRIPTION
-                    gr.Markdown(f"**📝 {proj['desc']}**", elem_classes="center-content")
-                    
-                    # SKILLS
-                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}", elem_classes="center-content")
+                    gr.Markdown(f"# 🚀 **{proj['name']}**")
+                    gr.Markdown(f"**📝 {proj['desc']}**")
+                    gr.Markdown(f"**🛠️ Tech Stack:** {' • '.join(proj['skills'])}")
                     
-                    # BUTTON + VIDEO
                     gr.HTML(f'''
-                    <div style="width:100%; text-align:center; padding:1rem;">
-                        <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none; display:inline-block;">
+                    <div style="width:100%; text-align:center;">
+                        <a href="{proj['live']}" target="_blank" class="demo-btn" style="text-decoration:none;">
                             🎮 Launch {proj['name']} Live Demo
                         </a>
                         <div class="video-container">
                             <video controls preload="metadata" 
-                                   style="width:100%; height:auto; max-height:350px; border-radius:16px; margin-top:1rem; box-shadow:0 20px 40px rgba(0,0,0,0.4); display:block;">
+                                   style="width:100%; height:auto; max-height:350px; border-radius:16px; margin-top:1rem; box-shadow:0 20px 40px rgba(0,0,0,0.4);">
                                 <source src="{proj['video']}" type="video/mp4">
-                                Your browser doesn't support video
                             </video>
                         </div>
                     </div>
                     ''')
 
-demo.launch(share=True, debug=True, show_error=True, height=1000)
+# **FIXED: css + height in launch()**
+demo.launch(
+    share=True, 
+    debug=True, 
+    show_error=True,
+    css=css,
+    height=1000
+)