Update app.py

app.py

@@ -221,6 +221,7 @@ html, body {
     margin: 0;
     padding: 0;
     overflow-x: hidden; /* Prevent horizontal scrollbar if content overflows */
+    width: 100vw;
 }
 
 body {
@@ -233,43 +234,39 @@ body {
 
 .gradio-container {
     /* Apply the semi-transparent black overlay from your inner div */
-    background-color: rgba(0, 0, 0, 0.60) !important; /* Equivalent to bg-black/55 */
-    
-    /* Ensure the container stretches to fill the screen height, accounting for its own padding/margin */
-    min-height: calc(100vh - 4rem); /* Adjust 4rem if your top/bottom margin (2rem each) changes */
+    background-color: rgba(0, 0, 0, 0.60) !important;
+
+    /* Make it span the full viewport */
+    min-height: 100vh !important; /* Forces full height */
+    width: 100vw !important;      /* Forces full width */
+    margin: 0 !important;         /* Remove any auto margins */
+    padding: 0 !important;        /* IMPORTANT: Remove internal padding so header can go edge-to-edge */
+    border-radius: 0 !important;  /* Remove rounded corners for full screen */
+    box-shadow: none !important;  /* Remove shadow for full screen */
+
     display: flex; /* Helps in making content fill vertical space */
     flex-direction: column; /* Stacks content vertically within the container */
-
-     /* --- ADD/CHANGE THESE LINES FOR FULL WIDTH --- */
-    max-width: unset !important; /* Removes the 1200px max-width constraint */
-    width: 100% !important;     /* Ensures it always takes full available width */
-    margin: 0 !important;       /* Removes auto margin, pushes it to edges */
-    border-radius: 0 !important; /* Remove border-radius if you want sharp corners for full width */
-    /* --- END ADD/CHANGE --- */
 }
 
 .header-container {
-    width: 100%;
+    width: 100%; /* Now takes 100% of the 100vw parent */
     height: 160px;
     position: relative;
     display: flex; /* For centering the h1 */
     flex-direction: column; /* For vertical alignment */
     justify-content: center; /* Centers the h1 vertically */
     align-items: center; /* Centers the h1 horizontally */
-    padding: 2rem 1rem; /* Padding for text inside, equivalent to p-4 for text content */
-    overflow: hidden;
-    border-bottom-left-radius: 1rem; /* Equivalent to rounded-b-2xl */
-    border-bottom-right-radius: 1rem; /* Equivalent to rounded-b-2xl */
+    padding: 2rem 1rem; /* Keep padding for text inside */
+    overflow: hidden !important; /* Explicitly ensure overflow is hidden */
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
     background: linear-gradient(to bottom, rgba(30,18,51,0.9) 0%, rgba(30,18,51,0.7) 60%, rgba(0,0,0,0) 100%);
     box-sizing: border-box; /* Include padding in the element's total width/height */
 
-    /* To make it span full width including gradio-container's padding */
-    margin-top: -2rem !important;    /* Compensate for gradio-container's top padding */
-    margin-left: -2rem !important;   /* Compensate for gradio-container's left padding */
-    margin-right: -2rem !important;  /* Compensate for gradio-container's right padding */
-    width: calc(100% + 4rem) !important; /* Adjust width to cover padding (2rem left + 2rem right) */
+    /* Removed negative margins and calc width, as parent is now full width and has no padding */
 }
 
+
 label, .gr-checkbox-label span { /* Target labels and checkbox labels */
     color: #E8E8E8 !important; /* Slightly brighter light gray for labels */
     font-weight: bold !important;