From e92b38826068488be3e42a937ccccf2a29ccb764 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Thu, 10 Oct 2024 17:02:58 -0400
Subject: [PATCH] Make terminal block scrollbar thumb slightly wider, closer to
 edge (#1007)

I can't push the scrollbar all the way to the edge because XTerm.js is
doing some fancy calculations for their viewport width and when I try to
mess with the CSS too much everything breaks, but I was able to get the
scrollbar thumb to be slightly wider and slightly closer to the edge
without everything falling apart
---
 frontend/app/view/term/term.less | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/app/view/term/term.less b/frontend/app/view/term/term.less
index d3b611d83..8dd176d57 100644
--- a/frontend/app/view/term/term.less
+++ b/frontend/app/view/term/term.less
@@ -118,24 +118,35 @@
     }
 
     .terminal {
-        *::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
+        .xterm-viewport {
+            right: -7px;
+        }
+        .xterm-viewport::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
         }
 
-        *::-webkit-scrollbar-track {
+        .xterm-viewport::-webkit-scrollbar-track {
             background-color: var(--scrollbar-background-color);
         }
 
-        *::-webkit-scrollbar-thumb {
+        .xterm-viewport::-webkit-scrollbar-thumb {
             display: none;
             background-color: var(--scrollbar-thumb-color);
             border-radius: 4px;
             margin: 0 1px 0 1px;
+
+            &:hover {
+                background-color: var(--scrollbar-thumb-hover-color);
+            }
+
+            &:active {
+                background-color: var(--scrollbar-thumb-active-color);
+            }
         }
 
         &:hover {
-            *::-webkit-scrollbar-thumb {
+            .xterm-viewport::-webkit-scrollbar-thumb {
                 display: block;
             }
         }