Update app.py

app.py

@@ -1,3 +1,10 @@
+#
+# ControlNet v1.1 Preprocessors Standalone | Space
+# Sebastian Kay 2024
+#
+# https://huggingface.co/spaces/Sebastiankay/controlnet-preprocessors-only
+#
+
 import gradio as gr
 import cv2
 import numpy as np
@@ -262,6 +269,32 @@ theme = gr.themes.Soft(
     radius_size="sm",
 )
 
+js = """
+    const tabNav = document.querySelector('.tab-nav');
+
+    tabNav.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    const scrollLeft = tabNav.scrollLeft + event.deltaY;
+    tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth));
+    });
+
+    tabNav.addEventListener('mouseover', () => {
+    tabNav.addEventListener('wheel', (event) => {
+        event.preventDefault();
+        const scrollLeft = tabNav.scrollLeft + event.deltaY;
+        tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth));
+    });
+    });
+
+    tabNav.addEventListener('mouseout', () => {
+    tabNav.removeEventListener('wheel', (event) => {
+        event.preventDefault();
+        const scrollLeft = tabNav.scrollLeft + event.deltaY;
+        tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth));
+    });
+    });
+"""
+
 css = """
     body > gradio-app {
         background: var(--primary-950);
@@ -269,6 +302,16 @@ css = """
         padding-top: 120px;
     }
     
+    
+    
+    div.tabs > div.tab-nav {
+        border-bottom: none; !important;
+        padding: 0 0.25rem 0 0.25rem !important;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+        overflow-y:hidden;
+    }
+    
     div.tabs > div.tab-nav > button.selected {
         border-width: 0 !important;
         background: var(--primary-600) !important;
@@ -276,9 +319,8 @@ css = """
         font-weight: 600;
     }
     
-    div.tabs > div.tab-nav {
-        border-bottom: none; !important;
-        padding: 0 0.25rem 0 0.25rem !important;
+    div.tabs > div.tab-nav > button {
+        min-width: 130px !important;
     }
     
     div.tabs div.tabitem {