fixed component height

app.py

@@ -312,6 +312,9 @@ dark_theme_css = """
 .gradio-container {
     background-color: #000000 !important;
     color: white !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
 }
 
 /* Remove borders from all components */
@@ -332,6 +335,29 @@ dark_theme_css = """
     left: 0 !important;
     top: 0 !important;
     width: 300px !important;
+    box-sizing: border-box !important;
+    overflow-y: auto !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #111111 !important;
+}
+
+/* Sidebar scrollbar styling */
+.sidebar::-webkit-scrollbar {
+    width: 8px !important;
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: #111111 !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
 }
 
 /* Enhanced model button styling */
@@ -416,7 +442,8 @@ dark_theme_css = """
     background-color: #000000 !important;
     border: none !important;
     transition: opacity 0.6s ease-in-out !important;
-    max-height: 70vh !important;
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
     overflow-y: auto !important;
     scrollbar-width: thin !important;
     scrollbar-color: #333333 #000000 !important;
@@ -550,7 +577,10 @@ h1, h2, h3, p, .markdown {
     padding: 20px !important;
     margin-left: 300px !important;
     height: 100vh !important;
-    overflow: hidden !important;
+    overflow-y: auto !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
 
 /* Custom scrollbar for main content */
@@ -577,7 +607,7 @@ h1, h2, h3, p, .markdown {
     background-color: #555555 !important;
 }
 
-/* Failed tests display - seamless appearance with fixed height */
+/* Failed tests display - seamless appearance with constrained height */
 .failed-tests textarea {
     background-color: #000000 !important;
     color: #FFFFFF !important;
@@ -587,9 +617,9 @@ h1, h2, h3, p, .markdown {
     padding: 10px !important;
     outline: none !important;
     line-height: 1.4 !important;
-    height: 200px !important;
-    max-height: 200px !important;
-    min-height: 200px !important;
+    height: 180px !important;
+    max-height: 180px !important;
+    min-height: 180px !important;
     overflow-y: auto !important;
     resize: none !important;
     scrollbar-width: thin !important;
@@ -630,17 +660,20 @@ h1, h2, h3, p, .markdown {
 
 .failed-tests {
     background-color: #000000 !important;
-    height: 220px !important;
-    max-height: 220px !important;
+    height: 200px !important;
+    max-height: 200px !important;
+    min-height: 200px !important;
     position: relative;
     transition: opacity 0.5s ease-in-out !important;
+    flex-shrink: 0 !important;
 }
 
 .failed-tests .gr-textbox {
     background-color: #000000 !important;
     border: none !important;
-    height: 200px !important;
-    max-height: 200px !important;
+    height: 180px !important;
+    max-height: 180px !important;
+    min-height: 180px !important;
     transition: opacity 0.5s ease-in-out !important;
 }
 
@@ -671,6 +704,14 @@ h1, h2, h3, p, .markdown {
 
 
 
+/* Detail view layout */
+.detail-view {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    min-height: 0 !important;
+}
+
 /* JavaScript to reset scroll position */
 .scroll-reset {
     animation: resetScroll 0.1s ease;