Fix scrollbar under the tracks list header on macOS

src/components/TrackListDefault.module.css

@@ -1,3 +1,15 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.scrollArea {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .rows {
   width: 100%;
   position: relative;

src/components/TrackListDefault.tsx

@@ -112,52 +112,55 @@ export default function TrackListDefault(props: Props) {
       modifiers={DND_MODIFIERS}
       sensors={sensors}
     >
-      <Scrollable ref={innerScrollableRef}>
+      <div className={styles.root}>
         <TrackListHeader enableSort={isSortEnabled} />
 
-        {/* The large inner element to hold all of the items */}
-        <ul
-          className={styles.rows}
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-          }}
-        >
-          <SortableContext
-            items={tracks}
-            strategy={verticalListSortingStrategy}
+        <Scrollable ref={innerScrollableRef} className={styles.scrollArea}>
+
+          {/* The large inner element to hold all of the items */}
+          <ul
+            className={styles.rows}
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+            }}
           >
-            {/* Only the visible items in the virtualizer, manually positioned to be in view */}
-            {virtualizer.getVirtualItems().map((virtualItem) => {
-              const track = tracks[virtualItem.index];
-              return (
-                <TrackRow
-                  key={virtualItem.key}
-                  selected={selectedTracks.has(track.id)}
-                  track={track}
-                  isPlaying={trackPlayingID === track.id}
-                  index={virtualItem.index}
-                  onTrackSelect={onTrackSelect}
-                  onContextMenu={onContextMenu}
-                  onPlaybackStart={onPlaybackStart}
-                  draggable={reorderable}
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    width: '100%',
-                    height: `${virtualItem.size}px`,
-                    // Intentionally not translateY, as it would create another paint
-                    // layer where every row would cover elements from the previous one.
-                    // This would typically prevent the drop effect to be properly displayed
-                    // when reordering a playlist
-                    top: `${virtualItem.start}px`,
-                    zIndex: 1,
-                  }}
-                />
-              );
-            })}
-          </SortableContext>
-        </ul>
-      </Scrollable>
+            <SortableContext
+              items={tracks}
+              strategy={verticalListSortingStrategy}
+            >
+              {/* Only the visible items in the virtualizer, manually positioned to be in view */}
+              {virtualizer.getVirtualItems().map((virtualItem) => {
+                const track = tracks[virtualItem.index];
+                return (
+                  <TrackRow
+                    key={virtualItem.key}
+                    selected={selectedTracks.has(track.id)}
+                    track={track}
+                    isPlaying={trackPlayingID === track.id}
+                    index={virtualItem.index}
+                    onTrackSelect={onTrackSelect}
+                    onContextMenu={onContextMenu}
+                    onPlaybackStart={onPlaybackStart}
+                    draggable={reorderable}
+                    style={{
+                      position: 'absolute',
+                      left: 0,
+                      width: '100%',
+                      height: `${virtualItem.size}px`,
+                      // Intentionally not translateY, as it would create another paint
+                      // layer where every row would cover elements from the previous one.
+                      // This would typically prevent the drop effect to be properly displayed
+                      // when reordering a playlist
+                      top: `${virtualItem.start}px`,
+                      zIndex: 1,
+                    }}
+                  />
+                );
+              })}
+            </SortableContext>
+          </ul>
+        </Scrollable>
+      </div>
     </DndContext>
   );
 }

src/elements/Scrollable.tsx

@@ -3,11 +3,16 @@ import styles from './Scrollable.module.css';
 type Props = {
   children: React.ReactNode;
   ref: React.Ref<HTMLDivElement>;
+  className?: string;
 };
 
 export default function Scrollable(props: Props) {
+  const className = props.className
+    ? `${styles.scrollable} ${props.className}`
+    : styles.scrollable;
+
   return (
-    <div className={styles.scrollable} ref={props.ref}>
+    <div className={className} ref={props.ref}>
       {props.children}
     </div>
   );