make segments list scrollable

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 });

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;