scrollbar fix

app.py

@@ -37,7 +37,7 @@ def dependency(text, col_punct, col_phrase, compact, bg, font, model):
     doc = nlp(text)
     options = {"compact": compact, "collapse_phrases": col_phrase,
                "collapse_punct": col_punct, "bg": bg, "color": font}
-    html = '<div style="overflow-x: auto; min-width:101%;">'
+    html = '<div class="frame" style="overflow-x: auto; min-width:101%;">'
     html = html + displacy.render(doc, style="dep", options=options) + '</div>'
     print(html)
     return html
@@ -120,7 +120,7 @@ def span(text, span1, span2, label1, label2, model):
             Span(doc, idx2_1, idx2_2, label2),
         ]
     else:
-        idx1_1 = 0
+        idx1_1 = 0  
         idx1_2 = round(len(list(doc)) / 2)
         idx2_1 = 0
         idx2_2 = 1
@@ -142,7 +142,7 @@ def get_text(model):
     return new_text
 
 
-demo = gr.Blocks()
+demo = gr.Blocks(css="scrollbar.css")
 
 with demo:
     with gr.Box():

scrollbar.css

@@ -0,0 +1,22 @@
+.frame::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+
+.frame::-webkit-scrollbar:vertical {
+    width: 11px;
+}
+
+.frame::-webkit-scrollbar:horizontal {
+    height: 11px;
+}
+
+.frame::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 2px solid white; /* should match background, can't be transparent */
+    background-color: rgba(0, 0, 0, .5);
+}
+
+.frame::-webkit-scrollbar-track { 
+    background-color: #fff; 
+    border-radius: 8px; 
+}