From 7d52c864d654334729aa4e8d9328fa280eadac4f Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sat, 24 Aug 2024 00:49:18 +0200
Subject: [PATCH] make segments list scrollable

---
 src/renderer/src/SegmentList.tsx |  2 +-
 src/renderer/src/main.css        | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/SegmentList.tsx b/src/renderer/src/SegmentList.tsx
index 80c71568..15f2be9d 100644
--- a/src/renderer/src/SegmentList.tsx
+++ b/src/renderer/src/SegmentList.tsx
@@ -460,7 +460,7 @@ function SegmentList({
           {header}
         </div>
 
-        <div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }} className="hide-scrollbar">
+        <div style={{ padding: '0 .1em 0 .3em', overflowX: 'hidden', overflowY: 'scroll', flexGrow: 1 }} className="consistent-scrollbar">
           <ReactSortable list={sortableList} setList={setSortableList} disabled={!!invertCutSegments} handle=".segment-handle">
             {sortableList.map(({ id, seg }, index) => {
               const selected = !invertCutSegments && isSegmentSelected({ segId: seg.segId });
diff --git a/src/renderer/src/main.css b/src/renderer/src/main.css
index 1559bc26..f92b7886 100644
--- a/src/renderer/src/main.css
+++ b/src/renderer/src/main.css
@@ -63,6 +63,17 @@ code.highlighted {
   display: none;
 }
 
+.consistent-scrollbar::-webkit-scrollbar {
+  width: .5em;
+}
+.consistent-scrollbar::-webkit-scrollbar-track-piece {
+  background: transparent;
+}
+.consistent-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--gray11);
+  border-radius: .1em;
+}
+
 .swal2-losslesscut-radio {
   font-size: 0.8em;
   flex-direction: column;