legraphista commited on
Commit
0491bca
1 Parent(s): 88962c6

fix: css scroll issues

Browse files

- fixed hidden video list section
- fixed hidden details bottom section
- fixed mobile usability

Files changed (1) hide show
  1. app.py +55 -1
app.py CHANGED
@@ -349,6 +349,38 @@ def process_video(video_id: str):
349
  return None, "", f"Error processing video: {str(e)}"
350
 
351
  css = """
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
352
  body {
353
  margin: 0;
354
  padding: 0;
@@ -404,6 +436,7 @@ body {
404
 
405
  max-height: 80vh; /* Adjust as needed */
406
  overflow-y: auto;
 
407
  }
408
  #video-column {
409
  width: 70%;
@@ -435,7 +468,6 @@ body {
435
  height: 100% !important;
436
  }
437
  #scrollable-content {
438
- height: 67vh;
439
  overflow-y: auto;
440
  padding: 20px;
441
  }
@@ -539,6 +571,9 @@ body {
539
  #header {
540
  flex-direction: column;
541
  align-items: flex-start;
 
 
 
542
  }
543
  #header-content h1 {
544
  font-size: 24px;
@@ -549,13 +584,32 @@ body {
549
  #logo {
550
  align-self: flex-end;
551
  margin-top: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
552
  }
553
  #top-panel {
554
  flex-direction: column;
 
555
  }
556
  #video-list-column, #video-column {
557
  width: 100%;
558
  }
 
 
 
559
  }
560
  .icon-buttons button {
561
  display: none !important;
 
349
  return None, "", f"Error processing video: {str(e)}"
350
 
351
  css = """
352
+ * {
353
+ margin: 0;
354
+ padding: 0;
355
+ box-sizing: border-box;
356
+ # flex: 0!important;
357
+ }
358
+ html, body, gradio-app {
359
+ height: 100%;
360
+ min-height: unset!important;
361
+ max-height: unset!important;
362
+ display: block!important;
363
+ }
364
+ .main {
365
+ flex-grow: 1;
366
+ flex-shrink: 1;
367
+ overflow: hidden;
368
+ }
369
+ .main .wrap .contain {
370
+ flex-grow: 1;
371
+ flex-shrink: 1;
372
+ overflow: hidden;
373
+ }
374
+ #component-0 {
375
+ overflow: hidden;
376
+ }
377
+ # .app {
378
+ # overflow: hidden;
379
+ # }
380
+ #top-panel {
381
+ flex-shrink: 0;
382
+ }
383
+
384
  body {
385
  margin: 0;
386
  padding: 0;
 
436
 
437
  max-height: 80vh; /* Adjust as needed */
438
  overflow-y: auto;
439
+ height: 100%;
440
  }
441
  #video-column {
442
  width: 70%;
 
468
  height: 100% !important;
469
  }
470
  #scrollable-content {
 
471
  overflow-y: auto;
472
  padding: 20px;
473
  }
 
571
  #header {
572
  flex-direction: column;
573
  align-items: flex-start;
574
+ flex-wrap: nowrap;
575
+ overflow: hidden;
576
+ max-height: 25vh;
577
  }
578
  #header-content h1 {
579
  font-size: 24px;
 
584
  #logo {
585
  align-self: flex-end;
586
  margin-top: 10px;
587
+
588
+ position: absolute;
589
+ top: 12px;
590
+ right: -24px;
591
+ height: auto!important;
592
+ width: 150px;
593
+ min-width: 0!important;
594
+
595
+ margin:0!important;
596
+ }
597
+ #logo .image-container {
598
+ height: auto!important;
599
+ }
600
+ .image-frame {
601
+ height: auto!important;
602
  }
603
  #top-panel {
604
  flex-direction: column;
605
+ height: 50vh;
606
  }
607
  #video-list-column, #video-column {
608
  width: 100%;
609
  }
610
+ #video-list-column {
611
+ flex-grow: 7!important;
612
+ }
613
  }
614
  .icon-buttons button {
615
  display: none !important;