Scoll is nice but animation to cover bottom start

app.py

@@ -365,6 +365,26 @@ h1, h2, h3, p, .markdown {
     min-height: 200px !important;
     overflow-y: auto !important;
     resize: none !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+}
+
+/* WebKit scrollbar styling for failed tests */
+.failed-tests textarea::-webkit-scrollbar {
+    width: 8px !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.failed-tests textarea::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
 }
 
 .failed-tests {
@@ -380,6 +400,17 @@ h1, h2, h3, p, .markdown {
     max-height: 200px !important;
 }
 
+/* JavaScript to reset scroll position */
+.scroll-reset {
+    animation: resetScroll 0.1s ease;
+}
+
+@keyframes resetScroll {
+    0% { scroll-behavior: auto; }
+    100% { scroll-behavior: auto; }
+}
+
+
 """
 
 # Create the Gradio interface with sidebar and dark theme
@@ -439,6 +470,9 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
         button.click(
             fn=lambda name=model_name: plot_model_stats(name),
             outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
+        ).then(
+            fn=None,
+            js="() => { setTimeout(() => { document.querySelectorAll('textarea').forEach(t => { if (t.closest('.failed-tests')) { t.scrollTo({ top: 0, behavior: 'smooth' }); } }); }, 100); }"
         )
     
     # Initialize with the first model