CSS fixes (#3)

- fix: css scroll issues (0491bca9df63efcb8dbefa1e1348c1b3a6b56bf4)
- fix: shrunk header on mobile when interacting (153cb7825b51a0bbbc976b1eb776a843c91b32a3)
- update: improved initial state (aaaca2f2bfaa1c7ea879fdf2a465627cf120ba56)


Co-authored-by: Stefan-Gabriel Muscalu <legraphista@users.noreply.huggingface.co>

app.py

@@ -349,6 +349,38 @@ def process_video(video_id: str):
         return None, "", f"Error processing video: {str(e)}"
     
 css = """
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    # flex: 0!important;
+}
+html, body, gradio-app {
+    height: 100%;
+    min-height: unset!important;
+    max-height: unset!important;
+    display: block!important;
+}
+.main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+}
+.main .wrap .contain {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+} 
+#component-0 {
+    overflow: hidden;
+}
+# .app {
+#     overflow: hidden;
+# }
+#top-panel {
+    flex-shrink: 0;
+}
+
 body {
     margin: 0;
     padding: 0;
@@ -404,6 +436,7 @@ body {
 
     max-height: 80vh; /* Adjust as needed */
     overflow-y: auto;
+    height: 100%;
 }
 #video-column {
     width: 70%;
@@ -435,7 +468,6 @@ body {
     height: 100% !important;
 }
 #scrollable-content {
-    height: 67vh;
     overflow-y: auto;
     padding: 20px;
 }
@@ -539,6 +571,10 @@ body {
     #header {
         flex-direction: column;
         align-items: flex-start;
+        flex-wrap: nowrap;
+        overflow: hidden;
+        max-height: 25vh;
+        flex-shrink: 0;
     }
     #header-content h1 {
         font-size: 24px;
@@ -549,13 +585,35 @@ body {
     #logo {
         align-self: flex-end;
         margin-top: 10px;
+
+        position: absolute;
+        top: 12px;
+        right: -24px;
+        height: auto!important;
+        width: 150px;
+        min-width: 0!important;
+
+        margin:0!important;
+    }
+    #logo .image-container {
+        height: auto!important;
+    }
+    .image-frame {
+        height: auto!important;
     }
     #top-panel {
         flex-direction: column;
+        height: auto;
+        flex-shrink: 1;
+        flex-grow: 1;
+        min-height: 50vh;
     }
     #video-list-column, #video-column {
         width: 100%;
     }
+    #video-list-column {
+        flex-grow: 7!important;
+    }
 }
 .icon-buttons button {
     display: none !important;