From 59d27654af55f373f5cd9c7e6c58ef20e9386e8c Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:50:38 +0200
Subject: [PATCH 1/2] Fix track tables for album and playlist views

---
 packages/player/src/views/Album/Album.tsx     |   2 +-
 .../views/PlaylistDetail/PlaylistDetail.tsx   |   2 +-
 .../views/PlaylistImport/PlaylistImport.tsx   |   2 +-
 .../ScrollableArea/ScrollableArea.tsx         |  17 ++-
 .../src/components/TrackTable/TrackTable.tsx  | 121 +++++++++---------
 5 files changed, 78 insertions(+), 66 deletions(-)

diff --git a/packages/player/src/views/Album/Album.tsx b/packages/player/src/views/Album/Album.tsx
index 10269ff3cb..6c3fdf11df 100644
--- a/packages/player/src/views/Album/Album.tsx
+++ b/packages/player/src/views/Album/Album.tsx
@@ -16,7 +16,7 @@ export const Album: FC<AlbumProps> = () => {
   return (
     <ScrollableArea className="bg-background" data-testid="album-view">
       <AlbumHeader providerId={providerId} albumId={albumId} />
-      <div className="p-6">
+      <div className="h-full p-6">
         <AlbumTrackList providerId={providerId} albumId={albumId} />
       </div>
     </ScrollableArea>
diff --git a/packages/player/src/views/PlaylistDetail/PlaylistDetail.tsx b/packages/player/src/views/PlaylistDetail/PlaylistDetail.tsx
index 37073a80b2..65e754ecc4 100644
--- a/packages/player/src/views/PlaylistDetail/PlaylistDetail.tsx
+++ b/packages/player/src/views/PlaylistDetail/PlaylistDetail.tsx
@@ -43,7 +43,7 @@ export const PlaylistDetail: FC = () => {
           className="flex-1"
         />
       ) : (
-        <div className="p-6">
+        <div className="h-full p-6">
           <ConnectedTrackTable
             tracks={tracks}
             getItemId={editing.getItemId}
diff --git a/packages/player/src/views/PlaylistImport/PlaylistImport.tsx b/packages/player/src/views/PlaylistImport/PlaylistImport.tsx
index 0fe3f0e96f..f452d240cd 100644
--- a/packages/player/src/views/PlaylistImport/PlaylistImport.tsx
+++ b/packages/player/src/views/PlaylistImport/PlaylistImport.tsx
@@ -44,7 +44,7 @@ export const PlaylistImport: FC = () => {
         </PlaylistDetailHeader>
       )}
       {tracks.length > 0 && (
-        <div className="p-6">
+        <div className="h-full p-6">
           <ConnectedTrackTable
             tracks={tracks}
             getItemId={getItemId}
diff --git a/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx b/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
index c779a41236..a5b563643b 100644
--- a/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
+++ b/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
@@ -1,5 +1,6 @@
 import {
   FC,
+  MutableRefObject,
   ReactNode,
   useCallback,
   useEffect,
@@ -15,6 +16,7 @@ export type ScrollableAreaProps = {
   className?: string;
   fadeScrollbars?: boolean;
   autoHideDelay?: number; // ms, default 1000
+  viewportRef?: MutableRefObject<HTMLDivElement | null>;
   'data-testid'?: string;
 };
 
@@ -37,7 +39,7 @@ const initialMetrics: ScrollMetrics = {
 };
 
 function useScrollMetrics(fadeScrollbars: boolean, autoHideDelay: number) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   const [metrics, setMetrics] = useState<ScrollMetrics>(initialMetrics);
   const [isScrolling, setIsScrolling] = useState(false);
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
@@ -247,6 +249,7 @@ export const ScrollableArea: FC<ScrollableAreaProps> = ({
   className,
   fadeScrollbars = true,
   autoHideDelay = 1000,
+  viewportRef,
   'data-testid': testId,
 }) => {
   const { ref, metrics, isScrolling, handleScroll } = useScrollMetrics(
@@ -254,6 +257,16 @@ export const ScrollableArea: FC<ScrollableAreaProps> = ({
     autoHideDelay,
   );
 
+  const setViewportNode = useCallback(
+    (node: HTMLDivElement | null) => {
+      ref.current = node;
+      if (viewportRef) {
+        viewportRef.current = node;
+      }
+    },
+    [ref, viewportRef],
+  );
+
   const needsVertical = metrics.scrollHeight > metrics.clientHeight;
   const needsHorizontal = metrics.scrollWidth > metrics.clientWidth;
   const needsCorner = needsVertical && needsHorizontal;
@@ -264,7 +277,7 @@ export const ScrollableArea: FC<ScrollableAreaProps> = ({
       data-testid={testId}
     >
       <div
-        ref={ref}
+        ref={setViewportNode}
         className="scrollbar-hide flex h-full w-full flex-col overflow-auto"
         onScroll={handleScroll}
         style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
diff --git a/packages/ui/src/components/TrackTable/TrackTable.tsx b/packages/ui/src/components/TrackTable/TrackTable.tsx
index 1ac8b43f2b..effc8a3fad 100644
--- a/packages/ui/src/components/TrackTable/TrackTable.tsx
+++ b/packages/ui/src/components/TrackTable/TrackTable.tsx
@@ -12,6 +12,7 @@ import { useMemo, useRef } from 'react';
 import { Track } from '@nuclearplayer/model';
 
 import { cn } from '../../utils';
+import { ScrollableArea } from '../ScrollableArea';
 import { defaultDisplay, defaultFeatures } from './defaults';
 import { useColumns } from './hooks/useColumns';
 import { useGlobalFilter } from './hooks/useGlobalFilter';
@@ -111,8 +112,6 @@ export function TrackTable<T extends Track = Track>({
 
   const dndItems = rows.map((row) => getItemId(row.original, row.index));
 
-  const mockViewportHeight = rowHeight * 12;
-
   return (
     <TrackTableProvider
       value={{
@@ -122,68 +121,68 @@ export function TrackTable<T extends Track = Track>({
         labels: mergedLabels,
       }}
     >
-      <Toolbar
-        filterValue={globalFilter}
-        onFilterChange={setGlobalFilter}
-        className="mb-2"
-      />
-      <div
-        ref={scrollParentRef}
-        className="relative flex max-h-full w-full overflow-y-auto"
-        data-test-resize-observer-inline-size="1024"
-        data-test-resize-observer-block-size={String(mockViewportHeight)}
-      >
-        <ReorderLayer
-          enabled={isReorderable}
-          items={dndItems}
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd as (evt: DragEndEvent) => void}
+      <div className="flex h-full flex-col">
+        <Toolbar
+          filterValue={globalFilter}
+          onFilterChange={setGlobalFilter}
+          className="mb-2 shrink-0"
+        />
+        <ScrollableArea
+          viewportRef={scrollParentRef}
+          className="min-h-0 flex-1"
         >
-          <table
-            role="table"
-            className={cn(
-              'border-border relative w-full table-fixed border-(length:--border-width)',
-              classes?.root,
-            )}
+          <ReorderLayer
+            enabled={isReorderable}
+            items={dndItems}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd as (evt: DragEndEvent) => void}
           >
-            {resolvedFeatures?.header && (
-              <thead>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <tr
-                    key={headerGroup.id}
-                    role="row"
-                    className="border-border bg-primary border-b-(length:--border-width)"
-                  >
-                    {headerGroup.headers.map((header) =>
-                      flexRender(header.column.columnDef.header, {
-                        ...header.getContext(),
-                        key: header.id,
-                      }),
-                    )}
-                  </tr>
-                ))}
-              </thead>
-            )}
-            <VirtualizedBody
-              rows={rows}
-              virtualItems={virtualItems}
-              paddingTop={paddingTop}
-              paddingBottom={paddingBottom}
-              colSpan={colCount}
-              rowHeight={rowHeight}
-              renderRow={({ row, virtual }) => (
-                <SortableRow
-                  key={getItemId(row.original, row.index)}
-                  row={row}
-                  itemId={getItemId(row.original, row.index)}
-                  style={{ height: rowHeight }}
-                  isReorderable={isReorderable}
-                  data-index={virtual.index}
-                />
+            <table
+              role="table"
+              className={cn(
+                'border-border relative w-full table-fixed border-(length:--border-width)',
+                classes?.root,
+              )}
+            >
+              {resolvedFeatures?.header && (
+                <thead>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <tr
+                      key={headerGroup.id}
+                      role="row"
+                      className="border-border bg-primary border-b-(length:--border-width)"
+                    >
+                      {headerGroup.headers.map((header) =>
+                        flexRender(header.column.columnDef.header, {
+                          ...header.getContext(),
+                          key: header.id,
+                        }),
+                      )}
+                    </tr>
+                  ))}
+                </thead>
               )}
-            />
-          </table>
-        </ReorderLayer>
+              <VirtualizedBody
+                rows={rows}
+                virtualItems={virtualItems}
+                paddingTop={paddingTop}
+                paddingBottom={paddingBottom}
+                colSpan={colCount}
+                rowHeight={rowHeight}
+                renderRow={({ row, virtual }) => (
+                  <SortableRow
+                    key={getItemId(row.original, row.index)}
+                    row={row}
+                    itemId={getItemId(row.original, row.index)}
+                    style={{ height: rowHeight }}
+                    isReorderable={isReorderable}
+                    data-index={virtual.index}
+                  />
+                )}
+              />
+            </table>
+          </ReorderLayer>
+        </ScrollableArea>
       </div>
     </TrackTableProvider>
   );

From 43b0d7584fcb5c39504f8fbb3e51a1082bde9b5a Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Fri, 5 Jun 2026 02:37:51 +0200
Subject: [PATCH 2/2] Update tests

---
 .../Album/__snapshots__/Album.test.tsx.snap   |  660 +-
 .../Artist/__snapshots__/Artist.test.tsx.snap | 1076 +--
 .../FavoriteTracks.test.tsx.snap              |  796 +-
 .../PlaylistDetail.test.tsx.snap              |  974 +--
 .../ScrollableArea/ScrollableArea.tsx         |    5 +
 .../src/components/TrackTable/TrackTable.tsx  |    3 +
 .../__snapshots__/TrackTable.test.tsx.snap    | 6686 +++++++++--------
 7 files changed, 5144 insertions(+), 5056 deletions(-)

diff --git a/packages/player/src/views/Album/__snapshots__/Album.test.tsx.snap b/packages/player/src/views/Album/__snapshots__/Album.test.tsx.snap
index 6295f48689..5e0188488c 100644
--- a/packages/player/src/views/Album/__snapshots__/Album.test.tsx.snap
+++ b/packages/player/src/views/Album/__snapshots__/Album.test.tsx.snap
@@ -689,233 +689,158 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
                   </div>
                 </div>
                 <div
-                  class="p-6"
+                  class="h-full p-6"
                 >
                   <div
-                    class="flex items-center gap-2 mb-2"
+                    class="flex h-full flex-col"
                   >
-                    <div>
-                      <button
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                        data-headlessui-state=""
-                        data-testid="play-all-button"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-play"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="3"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                        data-headlessui-state=""
-                        data-testid="add-all-to-queue-button"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-plus"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="3"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 12h14"
-                          />
-                          <path
-                            d="M12 5v14"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="relative flex max-h-full w-full overflow-y-auto"
-                    data-test-resize-observer-block-size="504"
-                    data-test-resize-observer-inline-size="1024"
-                  >
-                    <table
-                      class="border-border relative w-full table-fixed border-(length:--border-width)"
-                      role="table"
+                    <div
+                      class="flex items-center gap-2 mb-2 shrink-0"
                     >
-                      <thead>
-                        <tr
-                          class="border-border bg-primary border-b-(length:--border-width)"
-                          role="row"
+                      <div>
+                        <button
+                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                          data-headlessui-state=""
+                          data-testid="play-all-button"
+                          type="button"
                         >
-                          <th
-                            class="w-10 text-center"
-                            role="columnheader"
-                          >
-                            <span
-                              class="flex w-full items-center justify-center"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="lucide lucide-heart h-4 w-4"
-                                fill="none"
-                                height="24"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                />
-                              </svg>
-                            </span>
-                          </th>
-                          <th
-                            class="px-2 text-left cursor-pointer"
-                            role="columnheader"
-                          >
-                            <span
-                              class="flex items-center"
-                            >
-                              Artist
-                            </span>
-                          </th>
-                          <th
-                            class="px-2 text-left cursor-pointer"
-                            role="columnheader"
+                          <svg
+                            aria-hidden="true"
+                            class="lucide lucide-play"
+                            fill="none"
+                            height="16"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="3"
+                            viewBox="0 0 24 24"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <span
-                              class="flex items-center"
-                            >
-                              Title
-                            </span>
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr
-                          aria-describedby=""
-                          aria-disabled="true"
-                          aria-roledescription="sortable"
-                          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                          data-testid="track-row"
-                          role="button"
-                          style="height: 42px;"
-                          tabindex="0"
+                            <path
+                              d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                          data-headlessui-state=""
+                          data-testid="add-all-to-queue-button"
+                          type="button"
                         >
-                          <td
-                            class="w-10 text-center"
-                          >
-                            <button
-                              aria-label="Add to favorites"
-                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                              data-headlessui-state=""
-                              type="button"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                                fill="none"
-                                height="16"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                viewBox="0 0 24 24"
-                                width="16"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                />
-                              </svg>
-                            </button>
-                          </td>
-                          <td
-                            class="cursor-default truncate px-2"
-                          >
-                            <div
-                              class="truncate"
-                            >
-                              John Butler
-                            </div>
-                          </td>
-                          <td
-                            class="truncate px-2"
+                          <svg
+                            aria-hidden="true"
+                            class="lucide lucide-plus"
+                            fill="none"
+                            height="16"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="3"
+                            viewBox="0 0 24 24"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <div
-                              class="flex items-center justify-between gap-2"
+                            <path
+                              d="M5 12h14"
+                            />
+                            <path
+                              d="M12 5v14"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="relative h-full w-full min-h-0 flex-1"
+                    >
+                      <div
+                        class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+                        data-test-resize-observer-block-size="504"
+                        style="scrollbar-width: none;"
+                      >
+                        <table
+                          class="border-border relative w-full table-fixed border-(length:--border-width)"
+                          role="table"
+                        >
+                          <thead>
+                            <tr
+                              class="border-border bg-primary border-b-(length:--border-width)"
+                              role="row"
                             >
-                              <button
-                                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-                              >
-                                Going Solo
-                              </button>
-                              <div
-                                class="flex items-center gap-1"
+                              <th
+                                class="w-10 text-center"
+                                role="columnheader"
                               >
-                                <button
-                                  aria-label="Add to queue"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                                  data-headlessui-state=""
-                                  data-testid="add-to-queue-button"
-                                  type="button"
+                                <span
+                                  class="flex w-full items-center justify-center"
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="lucide lucide-plus"
+                                    class="lucide lucide-heart h-4 w-4"
                                     fill="none"
-                                    height="16"
+                                    height="24"
                                     stroke="currentColor"
                                     stroke-linecap="round"
                                     stroke-linejoin="round"
                                     stroke-width="2"
                                     viewBox="0 0 24 24"
-                                    width="16"
+                                    width="24"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <path
-                                      d="M5 12h14"
-                                    />
-                                    <path
-                                      d="M12 5v14"
+                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                                     />
                                   </svg>
-                                </button>
+                                </span>
+                              </th>
+                              <th
+                                class="px-2 text-left cursor-pointer"
+                                role="columnheader"
+                              >
+                                <span
+                                  class="flex items-center"
+                                >
+                                  Artist
+                                </span>
+                              </th>
+                              <th
+                                class="px-2 text-left cursor-pointer"
+                                role="columnheader"
+                              >
+                                <span
+                                  class="flex items-center"
+                                >
+                                  Title
+                                </span>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr
+                              aria-describedby=""
+                              aria-disabled="true"
+                              aria-roledescription="sortable"
+                              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                              data-testid="track-row"
+                              role="button"
+                              style="height: 42px;"
+                              tabindex="0"
+                            >
+                              <td
+                                class="w-10 text-center"
+                              >
                                 <button
-                                  aria-expanded="false"
-                                  aria-haspopup="menu"
-                                  aria-label="Track options"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                  aria-label="Add to favorites"
+                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                                   data-headlessui-state=""
-                                  data-state="closed"
-                                  data-testid="track-context-menu-button"
-                                  id="radix-:re:"
                                   type="button"
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="lucide lucide-ellipsis-vertical"
+                                    class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                                     fill="none"
                                     height="16"
                                     stroke="currentColor"
@@ -926,98 +851,130 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
                                     width="16"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <circle
-                                      cx="12"
-                                      cy="12"
-                                      r="1"
-                                    />
-                                    <circle
-                                      cx="12"
-                                      cy="5"
-                                      r="1"
-                                    />
-                                    <circle
-                                      cx="12"
-                                      cy="19"
-                                      r="1"
+                                    <path
+                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                                     />
                                   </svg>
                                 </button>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr
-                          aria-describedby=""
-                          aria-disabled="true"
-                          aria-roledescription="sortable"
-                          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                          data-testid="track-row"
-                          role="button"
-                          style="height: 42px;"
-                          tabindex="0"
-                        >
-                          <td
-                            class="w-10 text-center"
-                          >
-                            <button
-                              aria-label="Add to favorites"
-                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                              data-headlessui-state=""
-                              type="button"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                                fill="none"
-                                height="16"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                viewBox="0 0 24 24"
-                                width="16"
-                                xmlns="http://www.w3.org/2000/svg"
+                              </td>
+                              <td
+                                class="cursor-default truncate px-2"
                               >
-                                <path
-                                  d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                />
-                              </svg>
-                            </button>
-                          </td>
-                          <td
-                            class="cursor-default truncate px-2"
-                          >
-                            <div
-                              class="truncate"
-                            >
-                              John Butler
-                            </div>
-                          </td>
-                          <td
-                            class="truncate px-2"
-                          >
-                            <div
-                              class="flex items-center justify-between gap-2"
-                            >
-                              <button
-                                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                <div
+                                  class="truncate"
+                                >
+                                  John Butler
+                                </div>
+                              </td>
+                              <td
+                                class="truncate px-2"
                               >
-                                King of California
-                              </button>
-                              <div
-                                class="flex items-center gap-1"
+                                <div
+                                  class="flex items-center justify-between gap-2"
+                                >
+                                  <button
+                                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                  >
+                                    Going Solo
+                                  </button>
+                                  <div
+                                    class="flex items-center gap-1"
+                                  >
+                                    <button
+                                      aria-label="Add to queue"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      data-headlessui-state=""
+                                      data-testid="add-to-queue-button"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-plus"
+                                        fill="none"
+                                        height="16"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M5 12h14"
+                                        />
+                                        <path
+                                          d="M12 5v14"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <button
+                                      aria-expanded="false"
+                                      aria-haspopup="menu"
+                                      aria-label="Track options"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      data-headlessui-state=""
+                                      data-state="closed"
+                                      data-testid="track-context-menu-button"
+                                      id="radix-:re:"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-ellipsis-vertical"
+                                        fill="none"
+                                        height="16"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <circle
+                                          cx="12"
+                                          cy="12"
+                                          r="1"
+                                        />
+                                        <circle
+                                          cx="12"
+                                          cy="5"
+                                          r="1"
+                                        />
+                                        <circle
+                                          cx="12"
+                                          cy="19"
+                                          r="1"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </td>
+                            </tr>
+                            <tr
+                              aria-describedby=""
+                              aria-disabled="true"
+                              aria-roledescription="sortable"
+                              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                              data-testid="track-row"
+                              role="button"
+                              style="height: 42px;"
+                              tabindex="0"
+                            >
+                              <td
+                                class="w-10 text-center"
                               >
                                 <button
-                                  aria-label="Add to queue"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                  aria-label="Add to favorites"
+                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                                   data-headlessui-state=""
-                                  data-testid="add-to-queue-button"
                                   type="button"
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="lucide lucide-plus"
+                                    class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                                     fill="none"
                                     height="16"
                                     stroke="currentColor"
@@ -1029,60 +986,111 @@ exports[`Album view > (Snapshot) renders the album view 1`] = `
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <path
-                                      d="M5 12h14"
-                                    />
-                                    <path
-                                      d="M12 5v14"
+                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                                     />
                                   </svg>
                                 </button>
-                                <button
-                                  aria-expanded="false"
-                                  aria-haspopup="menu"
-                                  aria-label="Track options"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                                  data-headlessui-state=""
-                                  data-state="closed"
-                                  data-testid="track-context-menu-button"
-                                  id="radix-:rg:"
-                                  type="button"
+                              </td>
+                              <td
+                                class="cursor-default truncate px-2"
+                              >
+                                <div
+                                  class="truncate"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-ellipsis-vertical"
-                                    fill="none"
-                                    height="16"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="16"
-                                    xmlns="http://www.w3.org/2000/svg"
+                                  John Butler
+                                </div>
+                              </td>
+                              <td
+                                class="truncate px-2"
+                              >
+                                <div
+                                  class="flex items-center justify-between gap-2"
+                                >
+                                  <button
+                                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
                                   >
-                                    <circle
-                                      cx="12"
-                                      cy="12"
-                                      r="1"
-                                    />
-                                    <circle
-                                      cx="12"
-                                      cy="5"
-                                      r="1"
-                                    />
-                                    <circle
-                                      cx="12"
-                                      cy="19"
-                                      r="1"
-                                    />
-                                  </svg>
-                                </button>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                                    King of California
+                                  </button>
+                                  <div
+                                    class="flex items-center gap-1"
+                                  >
+                                    <button
+                                      aria-label="Add to queue"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      data-headlessui-state=""
+                                      data-testid="add-to-queue-button"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-plus"
+                                        fill="none"
+                                        height="16"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M5 12h14"
+                                        />
+                                        <path
+                                          d="M12 5v14"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <button
+                                      aria-expanded="false"
+                                      aria-haspopup="menu"
+                                      aria-label="Track options"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      data-headlessui-state=""
+                                      data-state="closed"
+                                      data-testid="track-context-menu-button"
+                                      id="radix-:rg:"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-ellipsis-vertical"
+                                        fill="none"
+                                        height="16"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <circle
+                                          cx="12"
+                                          cy="12"
+                                          r="1"
+                                        />
+                                        <circle
+                                          cx="12"
+                                          cy="5"
+                                          r="1"
+                                        />
+                                        <circle
+                                          cx="12"
+                                          cy="19"
+                                          r="1"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/player/src/views/Artist/__snapshots__/Artist.test.tsx.snap b/packages/player/src/views/Artist/__snapshots__/Artist.test.tsx.snap
index b9e441a2c3..c357b72865 100644
--- a/packages/player/src/views/Artist/__snapshots__/Artist.test.tsx.snap
+++ b/packages/player/src/views/Artist/__snapshots__/Artist.test.tsx.snap
@@ -696,281 +696,194 @@ exports[`Artist view > with bio provider > (Snapshot) renders the artist view 1`
                         Popular tracks
                       </h2>
                       <div
-                        class="flex items-center gap-2 mb-2"
+                        class="flex h-full flex-col"
                       >
-                        <div>
-                          <button
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                            data-headlessui-state=""
-                            data-testid="play-all-button"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="lucide lucide-play"
-                              fill="none"
-                              height="16"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="3"
-                              viewBox="0 0 24 24"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                        <div>
-                          <button
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                            data-headlessui-state=""
-                            data-testid="add-all-to-queue-button"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="lucide lucide-plus"
-                              fill="none"
-                              height="16"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="3"
-                              viewBox="0 0 24 24"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <div
-                        class="relative flex max-h-full w-full overflow-y-auto"
-                        data-test-resize-observer-block-size="504"
-                        data-test-resize-observer-inline-size="1024"
-                      >
-                        <table
-                          class="border-border relative w-full table-fixed border-(length:--border-width)"
-                          role="table"
+                        <div
+                          class="flex items-center gap-2 mb-2 shrink-0"
                         >
-                          <thead>
-                            <tr
-                              class="border-border bg-primary border-b-(length:--border-width)"
-                              role="row"
+                          <div>
+                            <button
+                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                              data-headlessui-state=""
+                              data-testid="play-all-button"
+                              type="button"
                             >
-                              <th
-                                class="w-10 text-center"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex w-full items-center justify-center"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-heart h-4 w-4"
-                                    fill="none"
-                                    height="24"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                    />
-                                  </svg>
-                                </span>
-                              </th>
-                              <th
-                                class="w-10 text-center"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex w-full items-center justify-center"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-image h-4 w-4"
-                                    fill="none"
-                                    height="24"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <rect
-                                      height="18"
-                                      rx="2"
-                                      ry="2"
-                                      width="18"
-                                      x="3"
-                                      y="3"
-                                    />
-                                    <circle
-                                      cx="9"
-                                      cy="9"
-                                      r="2"
-                                    />
-                                    <path
-                                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-                                    />
-                                  </svg>
-                                </span>
-                              </th>
-                              <th
-                                class="px-2 text-left cursor-pointer"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex items-center"
-                                >
-                                  Artist
-                                </span>
-                              </th>
-                              <th
-                                class="px-2 text-left cursor-pointer"
-                                role="columnheader"
+                              <svg
+                                aria-hidden="true"
+                                class="lucide lucide-play"
+                                fill="none"
+                                height="16"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="3"
+                                viewBox="0 0 24 24"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                <span
-                                  class="flex items-center"
-                                >
-                                  Title
-                                </span>
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr
-                              aria-describedby=""
-                              aria-disabled="true"
-                              aria-roledescription="sortable"
-                              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                              data-testid="track-row"
-                              role="button"
-                              style="height: 42px;"
-                              tabindex="0"
+                                <path
+                                  d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                          <div>
+                            <button
+                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                              data-headlessui-state=""
+                              data-testid="add-all-to-queue-button"
+                              type="button"
                             >
-                              <td
-                                class="w-10 text-center"
-                              >
-                                <button
-                                  aria-label="Add to favorites"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                                  data-headlessui-state=""
-                                  type="button"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                                    fill="none"
-                                    height="16"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="16"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                    />
-                                  </svg>
-                                </button>
-                              </td>
-                              <td
-                                class="w-10 text-center"
-                              >
-                                <div
-                                  class="flex w-full justify-center"
-                                >
-                                  <img
-                                    class="w-10 min-w-10"
-                                    src="https://img/track.jpg"
-                                  />
-                                </div>
-                              </td>
-                              <td
-                                class="cursor-default truncate px-2"
-                              >
-                                <div
-                                  class="truncate"
-                                >
-                                  Test Artist
-                                </div>
-                              </td>
-                              <td
-                                class="truncate px-2"
+                              <svg
+                                aria-hidden="true"
+                                class="lucide lucide-plus"
+                                fill="none"
+                                height="16"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="3"
+                                viewBox="0 0 24 24"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                <div
-                                  class="flex items-center justify-between gap-2"
+                                <path
+                                  d="M5 12h14"
+                                />
+                                <path
+                                  d="M12 5v14"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                        <div
+                          class="relative h-full w-full min-h-0 flex-1"
+                        >
+                          <div
+                            class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+                            data-test-resize-observer-block-size="504"
+                            style="scrollbar-width: none;"
+                          >
+                            <table
+                              class="border-border relative w-full table-fixed border-(length:--border-width)"
+                              role="table"
+                            >
+                              <thead>
+                                <tr
+                                  class="border-border bg-primary border-b-(length:--border-width)"
+                                  role="row"
                                 >
-                                  <button
-                                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                  <th
+                                    class="w-10 text-center"
+                                    role="columnheader"
                                   >
-                                    Smells Like Cheap Spirit
-                                  </button>
-                                  <div
-                                    class="flex items-center gap-1"
-                                  >
-                                    <button
-                                      aria-label="Add to queue"
-                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                                      data-headlessui-state=""
-                                      data-testid="add-to-queue-button"
-                                      type="button"
+                                    <span
+                                      class="flex w-full items-center justify-center"
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="lucide lucide-plus"
+                                        class="lucide lucide-heart h-4 w-4"
                                         fill="none"
-                                        height="16"
+                                        height="24"
                                         stroke="currentColor"
                                         stroke-linecap="round"
                                         stroke-linejoin="round"
                                         stroke-width="2"
                                         viewBox="0 0 24 24"
-                                        width="16"
+                                        width="24"
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M5 12h14"
+                                          d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="w-10 text-center"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex w-full items-center justify-center"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-image h-4 w-4"
+                                        fill="none"
+                                        height="24"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="24"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <rect
+                                          height="18"
+                                          rx="2"
+                                          ry="2"
+                                          width="18"
+                                          x="3"
+                                          y="3"
+                                        />
+                                        <circle
+                                          cx="9"
+                                          cy="9"
+                                          r="2"
                                         />
                                         <path
-                                          d="M12 5v14"
+                                          d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
                                         />
                                       </svg>
-                                    </button>
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="px-2 text-left cursor-pointer"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex items-center"
+                                    >
+                                      Artist
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="px-2 text-left cursor-pointer"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex items-center"
+                                    >
+                                      Title
+                                    </span>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr
+                                  aria-describedby=""
+                                  aria-disabled="true"
+                                  aria-roledescription="sortable"
+                                  class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                                  data-testid="track-row"
+                                  role="button"
+                                  style="height: 42px;"
+                                  tabindex="0"
+                                >
+                                  <td
+                                    class="w-10 text-center"
+                                  >
                                     <button
-                                      aria-expanded="false"
-                                      aria-haspopup="menu"
-                                      aria-label="Track options"
-                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      aria-label="Add to favorites"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                                       data-headlessui-state=""
-                                      data-state="closed"
-                                      data-testid="track-context-menu-button"
-                                      id="radix-:re:"
                                       type="button"
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="lucide lucide-ellipsis-vertical"
+                                        class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                                         fill="none"
                                         height="16"
                                         stroke="currentColor"
@@ -981,29 +894,124 @@ exports[`Artist view > with bio provider > (Snapshot) renders the artist view 1`
                                         width="16"
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          r="1"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="5"
-                                          r="1"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="19"
-                                          r="1"
+                                        <path
+                                          d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                                         />
                                       </svg>
                                     </button>
-                                  </div>
-                                </div>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
+                                  </td>
+                                  <td
+                                    class="w-10 text-center"
+                                  >
+                                    <div
+                                      class="flex w-full justify-center"
+                                    >
+                                      <img
+                                        class="w-10 min-w-10"
+                                        src="https://img/track.jpg"
+                                      />
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="cursor-default truncate px-2"
+                                  >
+                                    <div
+                                      class="truncate"
+                                    >
+                                      Test Artist
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="truncate px-2"
+                                  >
+                                    <div
+                                      class="flex items-center justify-between gap-2"
+                                    >
+                                      <button
+                                        class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                      >
+                                        Smells Like Cheap Spirit
+                                      </button>
+                                      <div
+                                        class="flex items-center gap-1"
+                                      >
+                                        <button
+                                          aria-label="Add to queue"
+                                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                          data-headlessui-state=""
+                                          data-testid="add-to-queue-button"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="lucide lucide-plus"
+                                            fill="none"
+                                            height="16"
+                                            stroke="currentColor"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M5 12h14"
+                                            />
+                                            <path
+                                              d="M12 5v14"
+                                            />
+                                          </svg>
+                                        </button>
+                                        <button
+                                          aria-expanded="false"
+                                          aria-haspopup="menu"
+                                          aria-label="Track options"
+                                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                          data-headlessui-state=""
+                                          data-state="closed"
+                                          data-testid="track-context-menu-button"
+                                          id="radix-:re:"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="lucide lucide-ellipsis-vertical"
+                                            fill="none"
+                                            height="16"
+                                            stroke="currentColor"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <circle
+                                              cx="12"
+                                              cy="12"
+                                              r="1"
+                                            />
+                                            <circle
+                                              cx="12"
+                                              cy="5"
+                                              r="1"
+                                            />
+                                            <circle
+                                              cx="12"
+                                              cy="19"
+                                              r="1"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -2484,281 +2492,194 @@ exports[`Artist view > with social stats provider > (Snapshot) renders the artis
                         Popular tracks
                       </h2>
                       <div
-                        class="flex items-center gap-2 mb-2"
+                        class="flex h-full flex-col"
                       >
-                        <div>
-                          <button
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                            data-headlessui-state=""
-                            data-testid="play-all-button"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="lucide lucide-play"
-                              fill="none"
-                              height="16"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="3"
-                              viewBox="0 0 24 24"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                        <div>
-                          <button
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                            data-headlessui-state=""
-                            data-testid="add-all-to-queue-button"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="lucide lucide-plus"
-                              fill="none"
-                              height="16"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="3"
-                              viewBox="0 0 24 24"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <div
-                        class="relative flex max-h-full w-full overflow-y-auto"
-                        data-test-resize-observer-block-size="504"
-                        data-test-resize-observer-inline-size="1024"
-                      >
-                        <table
-                          class="border-border relative w-full table-fixed border-(length:--border-width)"
-                          role="table"
+                        <div
+                          class="flex items-center gap-2 mb-2 shrink-0"
                         >
-                          <thead>
-                            <tr
-                              class="border-border bg-primary border-b-(length:--border-width)"
-                              role="row"
+                          <div>
+                            <button
+                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                              data-headlessui-state=""
+                              data-testid="play-all-button"
+                              type="button"
                             >
-                              <th
-                                class="w-10 text-center"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex w-full items-center justify-center"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-heart h-4 w-4"
-                                    fill="none"
-                                    height="24"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                    />
-                                  </svg>
-                                </span>
-                              </th>
-                              <th
-                                class="w-10 text-center"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex w-full items-center justify-center"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-image h-4 w-4"
-                                    fill="none"
-                                    height="24"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <rect
-                                      height="18"
-                                      rx="2"
-                                      ry="2"
-                                      width="18"
-                                      x="3"
-                                      y="3"
-                                    />
-                                    <circle
-                                      cx="9"
-                                      cy="9"
-                                      r="2"
-                                    />
-                                    <path
-                                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-                                    />
-                                  </svg>
-                                </span>
-                              </th>
-                              <th
-                                class="px-2 text-left cursor-pointer"
-                                role="columnheader"
-                              >
-                                <span
-                                  class="flex items-center"
-                                >
-                                  Artist
-                                </span>
-                              </th>
-                              <th
-                                class="px-2 text-left cursor-pointer"
-                                role="columnheader"
+                              <svg
+                                aria-hidden="true"
+                                class="lucide lucide-play"
+                                fill="none"
+                                height="16"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="3"
+                                viewBox="0 0 24 24"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                <span
-                                  class="flex items-center"
-                                >
-                                  Title
-                                </span>
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr
-                              aria-describedby=""
-                              aria-disabled="true"
-                              aria-roledescription="sortable"
-                              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                              data-testid="track-row"
-                              role="button"
-                              style="height: 42px;"
-                              tabindex="0"
+                                <path
+                                  d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                          <div>
+                            <button
+                              class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                              data-headlessui-state=""
+                              data-testid="add-all-to-queue-button"
+                              type="button"
                             >
-                              <td
-                                class="w-10 text-center"
-                              >
-                                <button
-                                  aria-label="Add to favorites"
-                                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                                  data-headlessui-state=""
-                                  type="button"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                                    fill="none"
-                                    height="16"
-                                    stroke="currentColor"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    viewBox="0 0 24 24"
-                                    width="16"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                                    />
-                                  </svg>
-                                </button>
-                              </td>
-                              <td
-                                class="w-10 text-center"
-                              >
-                                <div
-                                  class="flex w-full justify-center"
-                                >
-                                  <img
-                                    class="w-10 min-w-10"
-                                    src="https://img/track.jpg"
-                                  />
-                                </div>
-                              </td>
-                              <td
-                                class="cursor-default truncate px-2"
-                              >
-                                <div
-                                  class="truncate"
-                                >
-                                  Deadmau5
-                                </div>
-                              </td>
-                              <td
-                                class="truncate px-2"
+                              <svg
+                                aria-hidden="true"
+                                class="lucide lucide-plus"
+                                fill="none"
+                                height="16"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="3"
+                                viewBox="0 0 24 24"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                <div
-                                  class="flex items-center justify-between gap-2"
+                                <path
+                                  d="M5 12h14"
+                                />
+                                <path
+                                  d="M12 5v14"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                        <div
+                          class="relative h-full w-full min-h-0 flex-1"
+                        >
+                          <div
+                            class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+                            data-test-resize-observer-block-size="504"
+                            style="scrollbar-width: none;"
+                          >
+                            <table
+                              class="border-border relative w-full table-fixed border-(length:--border-width)"
+                              role="table"
+                            >
+                              <thead>
+                                <tr
+                                  class="border-border bg-primary border-b-(length:--border-width)"
+                                  role="row"
                                 >
-                                  <button
-                                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                  <th
+                                    class="w-10 text-center"
+                                    role="columnheader"
                                   >
-                                    Strobe
-                                  </button>
-                                  <div
-                                    class="flex items-center gap-1"
-                                  >
-                                    <button
-                                      aria-label="Add to queue"
-                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                                      data-headlessui-state=""
-                                      data-testid="add-to-queue-button"
-                                      type="button"
+                                    <span
+                                      class="flex w-full items-center justify-center"
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="lucide lucide-plus"
+                                        class="lucide lucide-heart h-4 w-4"
                                         fill="none"
-                                        height="16"
+                                        height="24"
                                         stroke="currentColor"
                                         stroke-linecap="round"
                                         stroke-linejoin="round"
                                         stroke-width="2"
                                         viewBox="0 0 24 24"
-                                        width="16"
+                                        width="24"
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M5 12h14"
+                                          d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="w-10 text-center"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex w-full items-center justify-center"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="lucide lucide-image h-4 w-4"
+                                        fill="none"
+                                        height="24"
+                                        stroke="currentColor"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        viewBox="0 0 24 24"
+                                        width="24"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <rect
+                                          height="18"
+                                          rx="2"
+                                          ry="2"
+                                          width="18"
+                                          x="3"
+                                          y="3"
+                                        />
+                                        <circle
+                                          cx="9"
+                                          cy="9"
+                                          r="2"
                                         />
                                         <path
-                                          d="M12 5v14"
+                                          d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
                                         />
                                       </svg>
-                                    </button>
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="px-2 text-left cursor-pointer"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex items-center"
+                                    >
+                                      Artist
+                                    </span>
+                                  </th>
+                                  <th
+                                    class="px-2 text-left cursor-pointer"
+                                    role="columnheader"
+                                  >
+                                    <span
+                                      class="flex items-center"
+                                    >
+                                      Title
+                                    </span>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr
+                                  aria-describedby=""
+                                  aria-disabled="true"
+                                  aria-roledescription="sortable"
+                                  class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                                  data-testid="track-row"
+                                  role="button"
+                                  style="height: 42px;"
+                                  tabindex="0"
+                                >
+                                  <td
+                                    class="w-10 text-center"
+                                  >
                                     <button
-                                      aria-expanded="false"
-                                      aria-haspopup="menu"
-                                      aria-label="Track options"
-                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                      aria-label="Add to favorites"
+                                      class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                                       data-headlessui-state=""
-                                      data-state="closed"
-                                      data-testid="track-context-menu-button"
-                                      id="radix-:r38:"
                                       type="button"
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="lucide lucide-ellipsis-vertical"
+                                        class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                                         fill="none"
                                         height="16"
                                         stroke="currentColor"
@@ -2769,29 +2690,124 @@ exports[`Artist view > with social stats provider > (Snapshot) renders the artis
                                         width="16"
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          r="1"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="5"
-                                          r="1"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="19"
-                                          r="1"
+                                        <path
+                                          d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                                         />
                                       </svg>
                                     </button>
-                                  </div>
-                                </div>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
+                                  </td>
+                                  <td
+                                    class="w-10 text-center"
+                                  >
+                                    <div
+                                      class="flex w-full justify-center"
+                                    >
+                                      <img
+                                        class="w-10 min-w-10"
+                                        src="https://img/track.jpg"
+                                      />
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="cursor-default truncate px-2"
+                                  >
+                                    <div
+                                      class="truncate"
+                                    >
+                                      Deadmau5
+                                    </div>
+                                  </td>
+                                  <td
+                                    class="truncate px-2"
+                                  >
+                                    <div
+                                      class="flex items-center justify-between gap-2"
+                                    >
+                                      <button
+                                        class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                                      >
+                                        Strobe
+                                      </button>
+                                      <div
+                                        class="flex items-center gap-1"
+                                      >
+                                        <button
+                                          aria-label="Add to queue"
+                                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                          data-headlessui-state=""
+                                          data-testid="add-to-queue-button"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="lucide lucide-plus"
+                                            fill="none"
+                                            height="16"
+                                            stroke="currentColor"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M5 12h14"
+                                            />
+                                            <path
+                                              d="M12 5v14"
+                                            />
+                                          </svg>
+                                        </button>
+                                        <button
+                                          aria-expanded="false"
+                                          aria-haspopup="menu"
+                                          aria-label="Track options"
+                                          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                          data-headlessui-state=""
+                                          data-state="closed"
+                                          data-testid="track-context-menu-button"
+                                          id="radix-:r38:"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="lucide lucide-ellipsis-vertical"
+                                            fill="none"
+                                            height="16"
+                                            stroke="currentColor"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <circle
+                                              cx="12"
+                                              cy="12"
+                                              r="1"
+                                            />
+                                            <circle
+                                              cx="12"
+                                              cy="5"
+                                              r="1"
+                                            />
+                                            <circle
+                                              cx="12"
+                                              cy="19"
+                                              r="1"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/packages/player/src/views/Favorites/__snapshots__/FavoriteTracks.test.tsx.snap b/packages/player/src/views/Favorites/__snapshots__/FavoriteTracks.test.tsx.snap
index f5bf6aac59..d853a13f96 100644
--- a/packages/player/src/views/Favorites/__snapshots__/FavoriteTracks.test.tsx.snap
+++ b/packages/player/src/views/Favorites/__snapshots__/FavoriteTracks.test.tsx.snap
@@ -123,434 +123,235 @@ exports[`FavoriteTracks view > (Snapshot) renders with tracks 1`] = `
             style="scrollbar-width: none;"
           >
             <div
-              class="flex items-center gap-2 mb-2"
+              class="flex h-full flex-col"
             >
-              <div>
-                <button
-                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                  data-headlessui-state=""
-                  data-testid="play-all-button"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="lucide lucide-play"
-                    fill="none"
-                    height="16"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="3"
-                    viewBox="0 0 24 24"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div>
-                <button
-                  class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
-                  data-headlessui-state=""
-                  data-testid="add-all-to-queue-button"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="lucide lucide-plus"
-                    fill="none"
-                    height="16"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="3"
-                    viewBox="0 0 24 24"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5 12h14"
-                    />
-                    <path
-                      d="M12 5v14"
-                    />
-                  </svg>
-                </button>
-              </div>
               <div
-                class="ml-auto inline-flex w-full max-w-sm items-stretch"
+                class="flex items-center gap-2 mb-2 shrink-0"
               >
-                <div
-                  class="flex w-full flex-col gap-2"
-                >
-                  <div
-                    class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+                <div>
+                  <button
+                    class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                    data-headlessui-state=""
+                    data-testid="play-all-button"
+                    type="button"
                   >
-                    <input
-                      class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-                      data-headlessui-state=""
-                      id="input-:r7:"
-                      placeholder="Filter tracks"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
+                    <svg
+                      aria-hidden="true"
+                      class="lucide lucide-play"
+                      fill="none"
+                      height="16"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="3"
+                      viewBox="0 0 24 24"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="lucide lucide-funnel h-4 w-4"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="3"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
+                      <path
+                        d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+                      />
+                    </svg>
+                  </button>
                 </div>
-              </div>
-            </div>
-            <div
-              class="relative flex max-h-full w-full overflow-y-auto"
-              data-test-resize-observer-block-size="504"
-              data-test-resize-observer-inline-size="1024"
-            >
-              <table
-                class="border-border relative w-full table-fixed border-(length:--border-width)"
-                role="table"
-              >
-                <thead>
-                  <tr
-                    class="border-border bg-primary border-b-(length:--border-width)"
-                    role="row"
+                <div>
+                  <button
+                    class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
+                    data-headlessui-state=""
+                    data-testid="add-all-to-queue-button"
+                    type="button"
                   >
-                    <th
-                      class="w-10 text-center"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex w-full items-center justify-center"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-heart h-4 w-4"
-                          fill="none"
-                          height="24"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                          />
-                        </svg>
-                      </span>
-                    </th>
-                    <th
-                      class="w-10 text-center"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex w-full items-center justify-center"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-image h-4 w-4"
-                          fill="none"
-                          height="24"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            height="18"
-                            rx="2"
-                            ry="2"
-                            width="18"
-                            x="3"
-                            y="3"
-                          />
-                          <circle
-                            cx="9"
-                            cy="9"
-                            r="2"
-                          />
-                          <path
-                            d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-                          />
-                        </svg>
-                      </span>
-                    </th>
-                    <th
-                      class="px-2 text-left cursor-pointer"
-                      role="columnheader"
+                    <svg
+                      aria-hidden="true"
+                      class="lucide lucide-plus"
+                      fill="none"
+                      height="16"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="3"
+                      viewBox="0 0 24 24"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <span
-                        class="flex items-center"
-                      >
-                        Artist
-                      </span>
-                    </th>
-                    <th
-                      class="px-2 text-left cursor-pointer"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex items-center"
-                      >
-                        Title
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    aria-describedby=""
-                    aria-disabled="true"
-                    aria-roledescription="sortable"
-                    class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                    data-testid="track-row"
-                    role="button"
-                    style="height: 42px;"
-                    tabindex="0"
+                      <path
+                        d="M5 12h14"
+                      />
+                      <path
+                        d="M12 5v14"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div
+                  class="ml-auto inline-flex w-full max-w-sm items-stretch"
+                >
+                  <div
+                    class="flex w-full flex-col gap-2"
                   >
-                    <td
-                      class="w-10 text-center"
+                    <div
+                      class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
                     >
-                      <button
-                        aria-label="Remove from favorites"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
+                      <input
+                        class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
                         data-headlessui-state=""
-                        type="button"
+                        id="input-:r7:"
+                        placeholder="Filter tracks"
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
                       >
                         <svg
                           aria-hidden="true"
-                          class="lucide lucide-heart transition-colors fill-accent-red text-accent-red"
+                          class="lucide lucide-funnel h-4 w-4"
                           fill="none"
-                          height="16"
+                          height="24"
                           stroke="currentColor"
                           stroke-linecap="round"
                           stroke-linejoin="round"
-                          stroke-width="2"
+                          stroke-width="3"
                           viewBox="0 0 24 24"
-                          width="16"
+                          width="24"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+                            d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                           />
                         </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <div
-                        class="flex w-full justify-center"
-                      >
-                        <img
-                          class="w-10 min-w-10"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        Test Artist
                       </div>
-                    </td>
-                    <td
-                      class="truncate px-2"
-                    >
-                      <div
-                        class="flex items-center justify-between gap-2"
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="relative h-full w-full min-h-0 flex-1"
+              >
+                <div
+                  class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+                  data-test-resize-observer-block-size="504"
+                  style="scrollbar-width: none;"
+                >
+                  <table
+                    class="border-border relative w-full table-fixed border-(length:--border-width)"
+                    role="table"
+                  >
+                    <thead>
+                      <tr
+                        class="border-border bg-primary border-b-(length:--border-width)"
+                        role="row"
                       >
-                        <button
-                          class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-                        >
-                          Track track-1
-                        </button>
-                        <div
-                          class="flex items-center gap-1"
+                        <th
+                          class="w-10 text-center"
+                          role="columnheader"
                         >
-                          <button
-                            aria-label="Add to queue"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                            data-headlessui-state=""
-                            data-testid="add-to-queue-button"
-                            type="button"
+                          <span
+                            class="flex w-full items-center justify-center"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-plus"
+                              class="lucide lucide-heart h-4 w-4"
                               fill="none"
-                              height="16"
+                              height="24"
                               stroke="currentColor"
                               stroke-linecap="round"
                               stroke-linejoin="round"
                               stroke-width="2"
                               viewBox="0 0 24 24"
-                              width="16"
+                              width="24"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                               />
                             </svg>
-                          </button>
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Track options"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
-                            data-headlessui-state=""
-                            data-state="closed"
-                            data-testid="track-context-menu-button"
-                            id="radix-:ra:"
-                            type="button"
+                          </span>
+                        </th>
+                        <th
+                          class="w-10 text-center"
+                          role="columnheader"
+                        >
+                          <span
+                            class="flex w-full items-center justify-center"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-ellipsis-vertical"
+                              class="lucide lucide-image h-4 w-4"
                               fill="none"
-                              height="16"
+                              height="24"
                               stroke="currentColor"
                               stroke-linecap="round"
                               stroke-linejoin="round"
                               stroke-width="2"
                               viewBox="0 0 24 24"
-                              width="16"
+                              width="24"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="1"
+                              <rect
+                                height="18"
+                                rx="2"
+                                ry="2"
+                                width="18"
+                                x="3"
+                                y="3"
                               />
                               <circle
-                                cx="12"
-                                cy="5"
-                                r="1"
+                                cx="9"
+                                cy="9"
+                                r="2"
                               />
-                              <circle
-                                cx="12"
-                                cy="19"
-                                r="1"
+                              <path
+                                d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
                               />
                             </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    aria-describedby=""
-                    aria-disabled="true"
-                    aria-roledescription="sortable"
-                    class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-                    data-testid="track-row"
-                    role="button"
-                    style="height: 42px;"
-                    tabindex="0"
-                  >
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <button
-                        aria-label="Remove from favorites"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                        data-headlessui-state=""
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-heart transition-colors fill-accent-red text-accent-red"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
+                          </span>
+                        </th>
+                        <th
+                          class="px-2 text-left cursor-pointer"
+                          role="columnheader"
                         >
-                          <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <div
-                        class="flex w-full justify-center"
-                      >
-                        <img
-                          class="w-10 min-w-10"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        Test Artist
-                      </div>
-                    </td>
-                    <td
-                      class="truncate px-2"
-                    >
-                      <div
-                        class="flex items-center justify-between gap-2"
-                      >
-                        <button
-                          class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                          <span
+                            class="flex items-center"
+                          >
+                            Artist
+                          </span>
+                        </th>
+                        <th
+                          class="px-2 text-left cursor-pointer"
+                          role="columnheader"
                         >
-                          Track track-2
-                        </button>
-                        <div
-                          class="flex items-center gap-1"
+                          <span
+                            class="flex items-center"
+                          >
+                            Title
+                          </span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        aria-describedby=""
+                        aria-disabled="true"
+                        aria-roledescription="sortable"
+                        class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                        data-testid="track-row"
+                        role="button"
+                        style="height: 42px;"
+                        tabindex="0"
+                      >
+                        <td
+                          class="w-10 text-center"
                         >
                           <button
-                            aria-label="Add to queue"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Remove from favorites"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-testid="add-to-queue-button"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-plus"
+                              class="lucide lucide-heart transition-colors fill-accent-red text-accent-red"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -562,27 +363,140 @@ exports[`FavoriteTracks view > (Snapshot) renders with tracks 1`] = `
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                               />
                             </svg>
                           </button>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
+                          <div
+                            class="flex w-full justify-center"
+                          >
+                            <img
+                              class="w-10 min-w-10"
+                            />
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            Test Artist
+                          </div>
+                        </td>
+                        <td
+                          class="truncate px-2"
+                        >
+                          <div
+                            class="flex items-center justify-between gap-2"
+                          >
+                            <button
+                              class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                            >
+                              Track track-1
+                            </button>
+                            <div
+                              class="flex items-center gap-1"
+                            >
+                              <button
+                                aria-label="Add to queue"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-testid="add-to-queue-button"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-plus"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M5 12h14"
+                                  />
+                                  <path
+                                    d="M12 5v14"
+                                  />
+                                </svg>
+                              </button>
+                              <button
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Track options"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-state="closed"
+                                data-testid="track-context-menu-button"
+                                id="radix-:ra:"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-ellipsis-vertical"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="5"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="19"
+                                    r="1"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr
+                        aria-describedby=""
+                        aria-disabled="true"
+                        aria-roledescription="sortable"
+                        class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                        data-testid="track-row"
+                        role="button"
+                        style="height: 42px;"
+                        tabindex="0"
+                      >
+                        <td
+                          class="w-10 text-center"
+                        >
                           <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Track options"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Remove from favorites"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-state="closed"
-                            data-testid="track-context-menu-button"
-                            id="radix-:rc:"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-ellipsis-vertical"
+                              class="lucide lucide-heart transition-colors fill-accent-red text-accent-red"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -593,29 +507,123 @@ exports[`FavoriteTracks view > (Snapshot) renders with tracks 1`] = `
                               width="16"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="1"
-                              />
-                              <circle
-                                cx="12"
-                                cy="5"
-                                r="1"
-                              />
-                              <circle
-                                cx="12"
-                                cy="19"
-                                r="1"
+                              <path
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                               />
                             </svg>
                           </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
+                          <div
+                            class="flex w-full justify-center"
+                          >
+                            <img
+                              class="w-10 min-w-10"
+                            />
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            Test Artist
+                          </div>
+                        </td>
+                        <td
+                          class="truncate px-2"
+                        >
+                          <div
+                            class="flex items-center justify-between gap-2"
+                          >
+                            <button
+                              class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                            >
+                              Track track-2
+                            </button>
+                            <div
+                              class="flex items-center gap-1"
+                            >
+                              <button
+                                aria-label="Add to queue"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-testid="add-to-queue-button"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-plus"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M5 12h14"
+                                  />
+                                  <path
+                                    d="M12 5v14"
+                                  />
+                                </svg>
+                              </button>
+                              <button
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Track options"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-state="closed"
+                                data-testid="track-context-menu-button"
+                                id="radix-:rc:"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-ellipsis-vertical"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="5"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="19"
+                                    r="1"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/player/src/views/PlaylistDetail/__snapshots__/PlaylistDetail.test.tsx.snap b/packages/player/src/views/PlaylistDetail/__snapshots__/PlaylistDetail.test.tsx.snap
index 132bdf065e..867f5c8b0c 100644
--- a/packages/player/src/views/PlaylistDetail/__snapshots__/PlaylistDetail.test.tsx.snap
+++ b/packages/player/src/views/PlaylistDetail/__snapshots__/PlaylistDetail.test.tsx.snap
@@ -191,285 +191,231 @@ exports[`PlaylistDetail view > (Snapshot) renders playlist detail with tracks 1`
             </div>
           </div>
           <div
-            class="p-6"
+            class="h-full p-6"
           >
             <div
-              class="flex items-center gap-2 mb-2"
+              class="flex h-full flex-col"
             >
               <div
-                class="ml-auto inline-flex w-full max-w-sm items-stretch"
+                class="flex items-center gap-2 mb-2 shrink-0"
               >
                 <div
-                  class="flex w-full flex-col gap-2"
+                  class="ml-auto inline-flex w-full max-w-sm items-stretch"
                 >
                   <div
-                    class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+                    class="flex w-full flex-col gap-2"
                   >
-                    <input
-                      class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-                      data-headlessui-state=""
-                      id="input-:r7:"
-                      placeholder="Filter tracks"
-                      type="text"
-                      value=""
-                    />
                     <div
-                      class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
+                      class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="lucide lucide-funnel h-4 w-4"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="3"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="relative flex max-h-full w-full overflow-y-auto"
-              data-test-resize-observer-block-size="504"
-              data-test-resize-observer-inline-size="1024"
-            >
-              <table
-                class="border-border relative w-full table-fixed border-(length:--border-width)"
-                role="table"
-              >
-                <thead>
-                  <tr
-                    class="border-border bg-primary border-b-(length:--border-width)"
-                    role="row"
-                  >
-                    <th
-                      class="w-10 text-center"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex w-full items-center justify-center"
+                      <input
+                        class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                        data-headlessui-state=""
+                        id="input-:r7:"
+                        placeholder="Filter tracks"
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
                       >
                         <svg
                           aria-hidden="true"
-                          class="lucide lucide-heart h-4 w-4"
+                          class="lucide lucide-funnel h-4 w-4"
                           fill="none"
                           height="24"
                           stroke="currentColor"
                           stroke-linecap="round"
                           stroke-linejoin="round"
-                          stroke-width="2"
+                          stroke-width="3"
                           viewBox="0 0 24 24"
                           width="24"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+                            d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                           />
                         </svg>
-                      </span>
-                    </th>
-                    <th
-                      class="w-10 text-center"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex w-full items-center justify-center"
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="relative h-full w-full min-h-0 flex-1"
+              >
+                <div
+                  class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+                  data-test-resize-observer-block-size="504"
+                  style="scrollbar-width: none;"
+                >
+                  <table
+                    class="border-border relative w-full table-fixed border-(length:--border-width)"
+                    role="table"
+                  >
+                    <thead>
+                      <tr
+                        class="border-border bg-primary border-b-(length:--border-width)"
+                        role="row"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-image h-4 w-4"
-                          fill="none"
-                          height="24"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <th
+                          class="w-10 text-center"
+                          role="columnheader"
                         >
-                          <rect
-                            height="18"
-                            rx="2"
-                            ry="2"
-                            width="18"
-                            x="3"
-                            y="3"
-                          />
-                          <circle
-                            cx="9"
-                            cy="9"
-                            r="2"
-                          />
-                          <path
-                            d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
-                          />
-                        </svg>
-                      </span>
-                    </th>
-                    <th
-                      class="px-2 text-left cursor-pointer"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex items-center"
-                      >
-                        Artist
-                      </span>
-                    </th>
-                    <th
-                      class="px-2 text-left cursor-pointer"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex items-center"
-                      >
-                        Title
-                      </span>
-                    </th>
-                    <th
-                      class="px-2 text-left cursor-pointer"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex items-center"
-                      >
-                        Duration
-                      </span>
-                    </th>
-                    <th
-                      class="w-10 text-center"
-                      role="columnheader"
-                    >
-                      <span
-                        class="flex w-full items-center justify-center"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-trash2 lucide-trash-2 h-4 w-4"
-                          fill="none"
-                          height="24"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="flex w-full items-center justify-center"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="lucide lucide-heart h-4 w-4"
+                              fill="none"
+                              height="24"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+                              />
+                            </svg>
+                          </span>
+                        </th>
+                        <th
+                          class="w-10 text-center"
+                          role="columnheader"
                         >
-                          <path
-                            d="M10 11v6"
-                          />
-                          <path
-                            d="M14 11v6"
-                          />
-                          <path
-                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-                          />
-                          <path
-                            d="M3 6h18"
-                          />
-                          <path
-                            d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                          />
-                        </svg>
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    aria-describedby="DndDescribedBy-0"
-                    aria-disabled="false"
-                    aria-roledescription="sortable"
-                    class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-                    data-testid="track-row"
-                    role="button"
-                    style="height: 42px;"
-                    tabindex="0"
-                  >
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <button
-                        aria-label="Add to favorites"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                        data-headlessui-state=""
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="flex w-full items-center justify-center"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="lucide lucide-image h-4 w-4"
+                              fill="none"
+                              height="24"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="18"
+                                rx="2"
+                                ry="2"
+                                width="18"
+                                x="3"
+                                y="3"
+                              />
+                              <circle
+                                cx="9"
+                                cy="9"
+                                r="2"
+                              />
+                              <path
+                                d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                              />
+                            </svg>
+                          </span>
+                        </th>
+                        <th
+                          class="px-2 text-left cursor-pointer"
+                          role="columnheader"
                         >
-                          <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <div
-                        class="flex w-full justify-center"
-                      >
-                        <img
-                          class="w-10 min-w-10"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        Test Artist
-                      </div>
-                    </td>
-                    <td
-                      class="truncate px-2"
-                    >
-                      <div
-                        class="flex items-center justify-between gap-2"
-                      >
-                        <button
-                          class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                          <span
+                            class="flex items-center"
+                          >
+                            Artist
+                          </span>
+                        </th>
+                        <th
+                          class="px-2 text-left cursor-pointer"
+                          role="columnheader"
                         >
-                          Giant Steps
-                        </button>
-                        <div
-                          class="flex items-center gap-1"
+                          <span
+                            class="flex items-center"
+                          >
+                            Title
+                          </span>
+                        </th>
+                        <th
+                          class="px-2 text-left cursor-pointer"
+                          role="columnheader"
+                        >
+                          <span
+                            class="flex items-center"
+                          >
+                            Duration
+                          </span>
+                        </th>
+                        <th
+                          class="w-10 text-center"
+                          role="columnheader"
+                        >
+                          <span
+                            class="flex w-full items-center justify-center"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="lucide lucide-trash2 lucide-trash-2 h-4 w-4"
+                              fill="none"
+                              height="24"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M10 11v6"
+                              />
+                              <path
+                                d="M14 11v6"
+                              />
+                              <path
+                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+                              />
+                              <path
+                                d="M3 6h18"
+                              />
+                              <path
+                                d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                              />
+                            </svg>
+                          </span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        aria-describedby="DndDescribedBy-0"
+                        aria-disabled="false"
+                        aria-roledescription="sortable"
+                        class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+                        data-testid="track-row"
+                        role="button"
+                        style="height: 42px;"
+                        tabindex="0"
+                      >
+                        <td
+                          class="w-10 text-center"
                         >
                           <button
-                            aria-label="Add to queue"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Add to favorites"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-testid="add-to-queue-button"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-plus"
+                              class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -481,27 +427,138 @@ exports[`PlaylistDetail view > (Snapshot) renders playlist detail with tracks 1`
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                               />
                             </svg>
                           </button>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
+                          <div
+                            class="flex w-full justify-center"
+                          >
+                            <img
+                              class="w-10 min-w-10"
+                            />
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            Test Artist
+                          </div>
+                        </td>
+                        <td
+                          class="truncate px-2"
+                        >
+                          <div
+                            class="flex items-center justify-between gap-2"
+                          >
+                            <button
+                              class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                            >
+                              Giant Steps
+                            </button>
+                            <div
+                              class="flex items-center gap-1"
+                            >
+                              <button
+                                aria-label="Add to queue"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-testid="add-to-queue-button"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-plus"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M5 12h14"
+                                  />
+                                  <path
+                                    d="M12 5v14"
+                                  />
+                                </svg>
+                              </button>
+                              <button
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Track options"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-state="closed"
+                                data-testid="track-context-menu-button"
+                                id="radix-:ra:"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-ellipsis-vertical"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="5"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="19"
+                                    r="1"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            3:00
+                          </div>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
                           <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Track options"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Remove from list"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-state="closed"
-                            data-testid="track-context-menu-button"
-                            id="radix-:ra:"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-ellipsis-vertical"
+                              class="lucide lucide-trash2 lucide-trash-2 text-foreground-secondary"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -512,158 +569,47 @@ exports[`PlaylistDetail view > (Snapshot) renders playlist detail with tracks 1`
                               width="16"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="1"
+                              <path
+                                d="M10 11v6"
                               />
-                              <circle
-                                cx="12"
-                                cy="5"
-                                r="1"
+                              <path
+                                d="M14 11v6"
                               />
-                              <circle
-                                cx="12"
-                                cy="19"
-                                r="1"
+                              <path
+                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+                              />
+                              <path
+                                d="M3 6h18"
+                              />
+                              <path
+                                d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                               />
                             </svg>
                           </button>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        3:00
-                      </div>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <button
-                        aria-label="Remove from list"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                        data-headlessui-state=""
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-trash2 lucide-trash-2 text-foreground-secondary"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10 11v6"
-                          />
-                          <path
-                            d="M14 11v6"
-                          />
-                          <path
-                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-                          />
-                          <path
-                            d="M3 6h18"
-                          />
-                          <path
-                            d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    aria-describedby="DndDescribedBy-0"
-                    aria-disabled="false"
-                    aria-roledescription="sortable"
-                    class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-                    data-testid="track-row"
-                    role="button"
-                    style="height: 42px;"
-                    tabindex="0"
-                  >
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <button
-                        aria-label="Add to favorites"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                        data-headlessui-state=""
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <div
-                        class="flex w-full justify-center"
+                        </td>
+                      </tr>
+                      <tr
+                        aria-describedby="DndDescribedBy-0"
+                        aria-disabled="false"
+                        aria-roledescription="sortable"
+                        class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+                        data-testid="track-row"
+                        role="button"
+                        style="height: 42px;"
+                        tabindex="0"
                       >
-                        <img
-                          class="w-10 min-w-10"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        Test Artist
-                      </div>
-                    </td>
-                    <td
-                      class="truncate px-2"
-                    >
-                      <div
-                        class="flex items-center justify-between gap-2"
-                      >
-                        <button
-                          class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-                        >
-                          So What
-                        </button>
-                        <div
-                          class="flex items-center gap-1"
+                        <td
+                          class="w-10 text-center"
                         >
                           <button
-                            aria-label="Add to queue"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Add to favorites"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-testid="add-to-queue-button"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-plus"
+                              class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -675,27 +621,138 @@ exports[`PlaylistDetail view > (Snapshot) renders playlist detail with tracks 1`
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5 12h14"
-                              />
-                              <path
-                                d="M12 5v14"
+                                d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                               />
                             </svg>
                           </button>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
+                          <div
+                            class="flex w-full justify-center"
+                          >
+                            <img
+                              class="w-10 min-w-10"
+                            />
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            Test Artist
+                          </div>
+                        </td>
+                        <td
+                          class="truncate px-2"
+                        >
+                          <div
+                            class="flex items-center justify-between gap-2"
+                          >
+                            <button
+                              class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                            >
+                              So What
+                            </button>
+                            <div
+                              class="flex items-center gap-1"
+                            >
+                              <button
+                                aria-label="Add to queue"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-testid="add-to-queue-button"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-plus"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M5 12h14"
+                                  />
+                                  <path
+                                    d="M12 5v14"
+                                  />
+                                </svg>
+                              </button>
+                              <button
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Track options"
+                                class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                                data-headlessui-state=""
+                                data-state="closed"
+                                data-testid="track-context-menu-button"
+                                id="radix-:rc:"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="lucide lucide-ellipsis-vertical"
+                                  fill="none"
+                                  height="16"
+                                  stroke="currentColor"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  viewBox="0 0 24 24"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <circle
+                                    cx="12"
+                                    cy="12"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="5"
+                                    r="1"
+                                  />
+                                  <circle
+                                    cx="12"
+                                    cy="19"
+                                    r="1"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                        </td>
+                        <td
+                          class="cursor-default truncate px-2"
+                        >
+                          <div
+                            class="truncate"
+                          >
+                            3:00
+                          </div>
+                        </td>
+                        <td
+                          class="w-10 text-center"
+                        >
                           <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Track options"
-                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center opacity-0 transition-none group-hover:opacity-100"
+                            aria-label="Remove from list"
+                            class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
                             data-headlessui-state=""
-                            data-state="closed"
-                            data-testid="track-context-menu-button"
-                            id="radix-:rc:"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="lucide lucide-ellipsis-vertical"
+                              class="lucide lucide-trash2 lucide-trash-2 text-foreground-secondary"
                               fill="none"
                               height="16"
                               stroke="currentColor"
@@ -706,95 +763,46 @@ exports[`PlaylistDetail view > (Snapshot) renders playlist detail with tracks 1`
                               width="16"
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                r="1"
+                              <path
+                                d="M10 11v6"
                               />
-                              <circle
-                                cx="12"
-                                cy="5"
-                                r="1"
+                              <path
+                                d="M14 11v6"
                               />
-                              <circle
-                                cx="12"
-                                cy="19"
-                                r="1"
+                              <path
+                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+                              />
+                              <path
+                                d="M3 6h18"
+                              />
+                              <path
+                                d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                               />
                             </svg>
                           </button>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="cursor-default truncate px-2"
-                    >
-                      <div
-                        class="truncate"
-                      >
-                        3:00
-                      </div>
-                    </td>
-                    <td
-                      class="w-10 text-center"
-                    >
-                      <button
-                        aria-label="Remove from list"
-                        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-8 justify-center"
-                        data-headlessui-state=""
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="lucide lucide-trash2 lucide-trash-2 text-foreground-secondary"
-                          fill="none"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          viewBox="0 0 24 24"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10 11v6"
-                          />
-                          <path
-                            d="M14 11v6"
-                          />
-                          <path
-                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
-                          />
-                          <path
-                            d="M3 6h18"
-                          />
-                          <path
-                            d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-              <div
-                id="DndDescribedBy-0"
-                style="display: none;"
-              >
-                
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div
+                    id="DndDescribedBy-0"
+                    style="display: none;"
+                  >
+                    
     To pick up a draggable item, press the space bar.
     While dragging, use the arrow keys to move the item.
     Press space again to drop the item in its new position, or press escape to cancel.
   
+                  </div>
+                  <div
+                    aria-atomic="true"
+                    aria-live="assertive"
+                    id="DndLiveRegion-0"
+                    role="status"
+                    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+                  />
+                </div>
               </div>
-              <div
-                aria-atomic="true"
-                aria-live="assertive"
-                id="DndLiveRegion-0"
-                role="status"
-                style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-              />
             </div>
           </div>
         </div>
diff --git a/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx b/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
index a5b563643b..8852de350f 100644
--- a/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
+++ b/packages/ui/src/components/ScrollableArea/ScrollableArea.tsx
@@ -17,6 +17,7 @@ export type ScrollableAreaProps = {
   fadeScrollbars?: boolean;
   autoHideDelay?: number; // ms, default 1000
   viewportRef?: MutableRefObject<HTMLDivElement | null>;
+  testViewportHeight?: number;
   'data-testid'?: string;
 };
 
@@ -250,6 +251,7 @@ export const ScrollableArea: FC<ScrollableAreaProps> = ({
   fadeScrollbars = true,
   autoHideDelay = 1000,
   viewportRef,
+  testViewportHeight,
   'data-testid': testId,
 }) => {
   const { ref, metrics, isScrolling, handleScroll } = useScrollMetrics(
@@ -281,6 +283,9 @@ export const ScrollableArea: FC<ScrollableAreaProps> = ({
         className="scrollbar-hide flex h-full w-full flex-col overflow-auto"
         onScroll={handleScroll}
         style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        data-test-resize-observer-block-size={
+          testViewportHeight != null ? String(testViewportHeight) : undefined
+        }
       >
         {children}
       </div>
diff --git a/packages/ui/src/components/TrackTable/TrackTable.tsx b/packages/ui/src/components/TrackTable/TrackTable.tsx
index effc8a3fad..e50a8a4a8f 100644
--- a/packages/ui/src/components/TrackTable/TrackTable.tsx
+++ b/packages/ui/src/components/TrackTable/TrackTable.tsx
@@ -112,6 +112,8 @@ export function TrackTable<T extends Track = Track>({
 
   const dndItems = rows.map((row) => getItemId(row.original, row.index));
 
+  const testViewportHeight = rowHeight * 12;
+
   return (
     <TrackTableProvider
       value={{
@@ -130,6 +132,7 @@ export function TrackTable<T extends Track = Track>({
         <ScrollableArea
           viewportRef={scrollParentRef}
           className="min-h-0 flex-1"
+          testViewportHeight={testViewportHeight}
         >
           <ReorderLayer
             enabled={isReorderable}
diff --git a/packages/ui/src/components/TrackTable/__snapshots__/TrackTable.test.tsx.snap b/packages/ui/src/components/TrackTable/__snapshots__/TrackTable.test.tsx.snap
index 5e277a2ba9..83468a022c 100644
--- a/packages/ui/src/components/TrackTable/__snapshots__/TrackTable.test.tsx.snap
+++ b/packages/ui/src/components/TrackTable/__snapshots__/TrackTable.test.tsx.snap
@@ -3,399 +3,407 @@
 exports[`TrackTable > (Snapshot) Basic 1`] = `
 <DocumentFragment>
   <div
-    class="flex items-center gap-2 mb-2"
+    class="flex h-full flex-col"
   >
     <div
-      class="ml-auto inline-flex w-full max-w-sm items-stretch"
+      class="flex items-center gap-2 mb-2 shrink-0"
     >
       <div
-        class="flex w-full flex-col gap-2"
+        class="ml-auto inline-flex w-full max-w-sm items-stretch"
       >
         <div
-          class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+          class="flex w-full flex-col gap-2"
         >
-          <input
-            class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-            data-headlessui-state=""
-            id="input-:r0:"
-            placeholder="Filter tracks"
-            type="text"
-            value=""
-          />
           <div
-            class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
-          >
-            <svg
-              aria-hidden="true"
-              class="lucide lucide-funnel h-4 w-4"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="relative flex max-h-full w-full overflow-y-auto"
-    data-test-resize-observer-block-size="504"
-    data-test-resize-observer-inline-size="1024"
-  >
-    <table
-      class="border-border relative w-full table-fixed border-(length:--border-width)"
-      role="table"
-    >
-      <thead>
-        <tr
-          class="border-border bg-primary border-b-(length:--border-width)"
-          role="row"
-        >
-          <th
-            class="w-10 text-center cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex w-full items-center justify-center"
-            >
-              <svg
-                aria-hidden="true"
-                class="lucide lucide-hash h-4 w-4"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="9"
-                  y2="9"
-                />
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="15"
-                  y2="15"
-                />
-                <line
-                  x1="10"
-                  x2="8"
-                  y1="3"
-                  y2="21"
-                />
-                <line
-                  x1="16"
-                  x2="14"
-                  y1="3"
-                  y2="21"
-                />
-              </svg>
-            </span>
-          </th>
-          <th
-            class="w-10 text-center"
-            role="columnheader"
+            class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
           >
-            <span
-              class="flex w-full items-center justify-center"
+            <input
+              class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+              data-headlessui-state=""
+              id="input-:r0:"
+              placeholder="Filter tracks"
+              type="text"
+              value=""
+            />
+            <div
+              class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
             >
               <svg
                 aria-hidden="true"
-                class="lucide lucide-image h-4 w-4"
+                class="lucide lucide-funnel h-4 w-4"
                 fill="none"
                 height="24"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                stroke-width="2"
+                stroke-width="3"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <rect
-                  height="18"
-                  rx="2"
-                  ry="2"
-                  width="18"
-                  x="3"
-                  y="3"
-                />
-                <circle
-                  cx="9"
-                  cy="9"
-                  r="2"
-                />
                 <path
-                  d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                  d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                 />
               </svg>
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Artist
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Title
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Album
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Duration
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            1
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 1
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:30
             </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="relative h-full w-full min-h-0 flex-1"
+    >
+      <div
+        class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+        data-test-resize-observer-block-size="504"
+        style="scrollbar-width: none;"
+      >
+        <table
+          class="border-border relative w-full table-fixed border-(length:--border-width)"
+          role="table"
         >
-          <td
-            class="min-w-10 text-center"
-          >
-            2
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
+          <thead>
+            <tr
+              class="border-border bg-primary border-b-(length:--border-width)"
+              role="row"
             >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+              <th
+                class="w-10 text-center cursor-pointer"
+                role="columnheader"
               >
-                Track 2
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:31
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            3
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-hash h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="9"
+                      y2="9"
+                    />
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="15"
+                      y2="15"
+                    />
+                    <line
+                      x1="10"
+                      x2="8"
+                      y1="3"
+                      y2="21"
+                    />
+                    <line
+                      x1="16"
+                      x2="14"
+                      y1="3"
+                      y2="21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="w-10 text-center"
+                role="columnheader"
+              >
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-image h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      height="18"
+                      rx="2"
+                      ry="2"
+                      width="18"
+                      x="3"
+                      y="3"
+                    />
+                    <circle
+                      cx="9"
+                      cy="9"
+                      r="2"
+                    />
+                    <path
+                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Artist
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Title
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Album
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Duration
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                1
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
               >
-                Track 3
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:32
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 1
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:30
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                2
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 2
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:31
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                3
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 3
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:32
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -403,552 +411,560 @@ exports[`TrackTable > (Snapshot) Basic 1`] = `
 exports[`TrackTable > (Snapshot) DragAndDrop 1`] = `
 <DocumentFragment>
   <div
-    class="flex items-center gap-2 mb-2"
+    class="flex h-full flex-col"
   >
     <div
-      class="ml-auto inline-flex w-full max-w-sm items-stretch"
+      class="flex items-center gap-2 mb-2 shrink-0"
     >
       <div
-        class="flex w-full flex-col gap-2"
+        class="ml-auto inline-flex w-full max-w-sm items-stretch"
       >
         <div
-          class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+          class="flex w-full flex-col gap-2"
         >
-          <input
-            class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-            data-headlessui-state=""
-            id="input-:r2:"
-            placeholder="Filter tracks"
-            type="text"
-            value=""
-          />
           <div
-            class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
-          >
-            <svg
-              aria-hidden="true"
-              class="lucide lucide-funnel h-4 w-4"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="relative flex max-h-full w-full overflow-y-auto"
-    data-test-resize-observer-block-size="504"
-    data-test-resize-observer-inline-size="1024"
-  >
-    <table
-      class="border-border relative w-full table-fixed border-(length:--border-width)"
-      role="table"
-    >
-      <thead>
-        <tr
-          class="border-border bg-primary border-b-(length:--border-width)"
-          role="row"
-        >
-          <th
-            class="w-10 text-center cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex w-full items-center justify-center"
-            >
-              <svg
-                aria-hidden="true"
-                class="lucide lucide-hash h-4 w-4"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="9"
-                  y2="9"
-                />
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="15"
-                  y2="15"
-                />
-                <line
-                  x1="10"
-                  x2="8"
-                  y1="3"
-                  y2="21"
-                />
-                <line
-                  x1="16"
-                  x2="14"
-                  y1="3"
-                  y2="21"
-                />
-              </svg>
-            </span>
-          </th>
-          <th
-            class="w-10 text-center"
-            role="columnheader"
+            class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
           >
-            <span
-              class="flex w-full items-center justify-center"
+            <input
+              class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+              data-headlessui-state=""
+              id="input-:r2:"
+              placeholder="Filter tracks"
+              type="text"
+              value=""
+            />
+            <div
+              class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
             >
               <svg
                 aria-hidden="true"
-                class="lucide lucide-image h-4 w-4"
+                class="lucide lucide-funnel h-4 w-4"
                 fill="none"
                 height="24"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                stroke-width="2"
+                stroke-width="3"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <rect
-                  height="18"
-                  rx="2"
-                  ry="2"
-                  width="18"
-                  x="3"
-                  y="3"
-                />
-                <circle
-                  cx="9"
-                  cy="9"
-                  r="2"
-                />
                 <path
-                  d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                  d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                 />
               </svg>
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Artist
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Title
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Album
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Duration
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          aria-describedby="DndDescribedBy-0"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            1
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 1
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
             </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:30
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby="DndDescribedBy-0"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="relative h-full w-full min-h-0 flex-1"
+    >
+      <div
+        class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+        data-test-resize-observer-block-size="504"
+        style="scrollbar-width: none;"
+      >
+        <table
+          class="border-border relative w-full table-fixed border-(length:--border-width)"
+          role="table"
         >
-          <td
-            class="min-w-10 text-center"
-          >
-            2
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
+          <thead>
+            <tr
+              class="border-border bg-primary border-b-(length:--border-width)"
+              role="row"
             >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+              <th
+                class="w-10 text-center cursor-pointer"
+                role="columnheader"
               >
-                Track 2
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:31
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby="DndDescribedBy-0"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            3
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-hash h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="9"
+                      y2="9"
+                    />
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="15"
+                      y2="15"
+                    />
+                    <line
+                      x1="10"
+                      x2="8"
+                      y1="3"
+                      y2="21"
+                    />
+                    <line
+                      x1="16"
+                      x2="14"
+                      y1="3"
+                      y2="21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="w-10 text-center"
+                role="columnheader"
+              >
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-image h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      height="18"
+                      rx="2"
+                      ry="2"
+                      width="18"
+                      x="3"
+                      y="3"
+                    />
+                    <circle
+                      cx="9"
+                      cy="9"
+                      r="2"
+                    />
+                    <path
+                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Artist
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Title
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Album
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Duration
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              aria-describedby="DndDescribedBy-0"
+              aria-disabled="false"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                1
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
               >
-                Track 3
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:32
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby="DndDescribedBy-0"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            4
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 1
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:30
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby="DndDescribedBy-0"
+              aria-disabled="false"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                2
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
               >
-                Track 4
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:33
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby="DndDescribedBy-0"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            5
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 2
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:31
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby="DndDescribedBy-0"
+              aria-disabled="false"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                3
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
               >
-                Track 5
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:34
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div
-      id="DndDescribedBy-0"
-      style="display: none;"
-    >
-      
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 3
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:32
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby="DndDescribedBy-0"
+              aria-disabled="false"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                4
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 4
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:33
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby="DndDescribedBy-0"
+              aria-disabled="false"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none cursor-grab"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                5
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 5
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:34
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          id="DndDescribedBy-0"
+          style="display: none;"
+        >
+          
     To pick up a draggable item, press the space bar.
     While dragging, use the arrow keys to move the item.
     Press space again to drop the item in its new position, or press escape to cancel.
   
+        </div>
+        <div
+          aria-atomic="true"
+          aria-live="assertive"
+          id="DndLiveRegion-0"
+          role="status"
+          style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+        />
+      </div>
     </div>
-    <div
-      aria-atomic="true"
-      aria-live="assertive"
-      id="DndLiveRegion-0"
-      role="status"
-      style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -956,2102 +972,2118 @@ exports[`TrackTable > (Snapshot) DragAndDrop 1`] = `
 exports[`TrackTable > (Snapshot) Filtering 1`] = `
 <DocumentFragment>
   <div
-    class="flex items-center gap-2 mb-2"
+    class="flex h-full flex-col"
   >
     <div
-      class="ml-auto inline-flex w-full max-w-sm items-stretch"
+      class="flex items-center gap-2 mb-2 shrink-0"
     >
       <div
-        class="flex w-full flex-col gap-2"
+        class="ml-auto inline-flex w-full max-w-sm items-stretch"
       >
         <div
-          class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+          class="flex w-full flex-col gap-2"
         >
-          <input
-            class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-            data-headlessui-state=""
-            id="input-:r4:"
-            placeholder="Filter tracks"
-            type="text"
-            value=""
-          />
           <div
-            class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
-          >
-            <svg
-              aria-hidden="true"
-              class="lucide lucide-funnel h-4 w-4"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="relative flex max-h-full w-full overflow-y-auto"
-    data-test-resize-observer-block-size="504"
-    data-test-resize-observer-inline-size="1024"
-  >
-    <table
-      class="border-border relative w-full table-fixed border-(length:--border-width)"
-      role="table"
-    >
-      <thead>
-        <tr
-          class="border-border bg-primary border-b-(length:--border-width)"
-          role="row"
-        >
-          <th
-            class="w-10 text-center cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex w-full items-center justify-center"
-            >
-              <svg
-                aria-hidden="true"
-                class="lucide lucide-hash h-4 w-4"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="9"
-                  y2="9"
-                />
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="15"
-                  y2="15"
-                />
-                <line
-                  x1="10"
-                  x2="8"
-                  y1="3"
-                  y2="21"
-                />
-                <line
-                  x1="16"
-                  x2="14"
-                  y1="3"
-                  y2="21"
-                />
-              </svg>
-            </span>
-          </th>
-          <th
-            class="w-10 text-center"
-            role="columnheader"
+            class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
           >
-            <span
-              class="flex w-full items-center justify-center"
+            <input
+              class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+              data-headlessui-state=""
+              id="input-:r4:"
+              placeholder="Filter tracks"
+              type="text"
+              value=""
+            />
+            <div
+              class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
             >
               <svg
                 aria-hidden="true"
-                class="lucide lucide-image h-4 w-4"
+                class="lucide lucide-funnel h-4 w-4"
                 fill="none"
                 height="24"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                stroke-width="2"
+                stroke-width="3"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <rect
-                  height="18"
-                  rx="2"
-                  ry="2"
-                  width="18"
-                  x="3"
-                  y="3"
-                />
-                <circle
-                  cx="9"
-                  cy="9"
-                  r="2"
-                />
                 <path
-                  d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                  d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                 />
               </svg>
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Artist
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Title
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Album
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="relative h-full w-full min-h-0 flex-1"
+    >
+      <div
+        class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+        data-test-resize-observer-block-size="504"
+        style="scrollbar-width: none;"
+      >
+        <table
+          class="border-border relative w-full table-fixed border-(length:--border-width)"
+          role="table"
+        >
+          <thead>
+            <tr
+              class="border-border bg-primary border-b-(length:--border-width)"
+              role="row"
             >
-              Duration
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
+              <th
+                class="w-10 text-center cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-hash h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="9"
+                      y2="9"
+                    />
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="15"
+                      y2="15"
+                    />
+                    <line
+                      x1="10"
+                      x2="8"
+                      y1="3"
+                      y2="21"
+                    />
+                    <line
+                      x1="16"
+                      x2="14"
+                      y1="3"
+                      y2="21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="w-10 text-center"
+                role="columnheader"
+              >
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-image h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      height="18"
+                      rx="2"
+                      ry="2"
+                      width="18"
+                      x="3"
+                      y="3"
+                    />
+                    <circle
+                      cx="9"
+                      cy="9"
+                      r="2"
+                    />
+                    <path
+                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Artist
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Title
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Album
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Duration
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                1
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 1
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:30
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                2
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 2
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:31
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                3
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 3
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:32
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                4
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 4
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:33
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                5
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 5
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:34
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TrackTable > (Snapshot) LargeDataset 1`] = `
+<DocumentFragment>
+  <div
+    style="height: 400px;"
+  >
+    <div
+      class="flex h-full flex-col"
+    >
+      <div
+        class="flex items-center gap-2 mb-2 shrink-0"
+      >
+        <div
+          class="ml-auto inline-flex w-full max-w-sm items-stretch"
         >
-          <td
-            class="min-w-10 text-center"
-          >
-            1
-          </td>
-          <td
-            class="w-10 text-center"
+          <div
+            class="flex w-full flex-col gap-2"
           >
             <div
-              class="flex w-full justify-center"
+              class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
             >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
+              <input
+                class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                data-headlessui-state=""
+                id="input-:r6:"
+                placeholder="Filter tracks"
+                type="text"
+                value=""
               />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 1
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:30
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            2
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 2
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:31
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            3
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 3
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:32
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            4
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 4
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:33
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            5
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 5
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:34
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TrackTable > (Snapshot) LargeDataset 1`] = `
-<DocumentFragment>
-  <div
-    style="height: 400px;"
-  >
-    <div
-      class="flex items-center gap-2 mb-2"
-    >
-      <div
-        class="ml-auto inline-flex w-full max-w-sm items-stretch"
-      >
-        <div
-          class="flex w-full flex-col gap-2"
-        >
-          <div
-            class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
-          >
-            <input
-              class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-              data-headlessui-state=""
-              id="input-:r6:"
-              placeholder="Filter tracks"
-              type="text"
-              value=""
-            />
-            <div
-              class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
-            >
-              <svg
-                aria-hidden="true"
-                class="lucide lucide-funnel h-4 w-4"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="3"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="relative flex max-h-full w-full overflow-y-auto"
-      data-test-resize-observer-block-size="504"
-      data-test-resize-observer-inline-size="1024"
-    >
-      <table
-        class="border-border relative w-full table-fixed border-(length:--border-width)"
-        role="table"
-      >
-        <thead>
-          <tr
-            class="border-border bg-primary border-b-(length:--border-width)"
-            role="row"
-          >
-            <th
-              class="w-10 text-center cursor-pointer"
-              role="columnheader"
-            >
-              <span
-                class="flex w-full items-center justify-center"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="lucide lucide-hash h-4 w-4"
-                  fill="none"
-                  height="24"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <line
-                    x1="4"
-                    x2="20"
-                    y1="9"
-                    y2="9"
-                  />
-                  <line
-                    x1="4"
-                    x2="20"
-                    y1="15"
-                    y2="15"
-                  />
-                  <line
-                    x1="10"
-                    x2="8"
-                    y1="3"
-                    y2="21"
-                  />
-                  <line
-                    x1="16"
-                    x2="14"
-                    y1="3"
-                    y2="21"
-                  />
-                </svg>
-              </span>
-            </th>
-            <th
-              class="w-10 text-center"
-              role="columnheader"
-            >
-              <span
-                class="flex w-full items-center justify-center"
+              <div
+                class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
               >
                 <svg
                   aria-hidden="true"
-                  class="lucide lucide-image h-4 w-4"
+                  class="lucide lucide-funnel h-4 w-4"
                   fill="none"
                   height="24"
                   stroke="currentColor"
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  stroke-width="2"
+                  stroke-width="3"
                   viewBox="0 0 24 24"
                   width="24"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <rect
-                    height="18"
-                    rx="2"
-                    ry="2"
-                    width="18"
-                    x="3"
-                    y="3"
-                  />
-                  <circle
-                    cx="9"
-                    cy="9"
-                    r="2"
-                  />
                   <path
-                    d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                    d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                   />
                 </svg>
-              </span>
-            </th>
-            <th
-              class="px-2 text-left cursor-pointer"
-              role="columnheader"
-            >
-              <span
-                class="flex items-center"
-              >
-                Artist
-              </span>
-            </th>
-            <th
-              class="px-2 text-left cursor-pointer"
-              role="columnheader"
-            >
-              <span
-                class="flex items-center"
-              >
-                Title
-              </span>
-            </th>
-            <th
-              class="px-2 text-left cursor-pointer"
-              role="columnheader"
-            >
-              <span
-                class="flex items-center"
-              >
-                Album
-              </span>
-            </th>
-            <th
-              class="px-2 text-left cursor-pointer"
-              role="columnheader"
-            >
-              <span
-                class="flex items-center"
-              >
-                Duration
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              1
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
               </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="relative h-full w-full min-h-0 flex-1"
+      >
+        <div
+          class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+          data-test-resize-observer-block-size="504"
+          style="scrollbar-width: none;"
+        >
+          <table
+            class="border-border relative w-full table-fixed border-(length:--border-width)"
+            role="table"
+          >
+            <thead>
+              <tr
+                class="border-border bg-primary border-b-(length:--border-width)"
+                role="row"
+              >
+                <th
+                  class="w-10 text-center cursor-pointer"
+                  role="columnheader"
                 >
-                  Track 1
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:30
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              2
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex w-full items-center justify-center"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="lucide lucide-hash h-4 w-4"
+                      fill="none"
+                      height="24"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <line
+                        x1="4"
+                        x2="20"
+                        y1="9"
+                        y2="9"
+                      />
+                      <line
+                        x1="4"
+                        x2="20"
+                        y1="15"
+                        y2="15"
+                      />
+                      <line
+                        x1="10"
+                        x2="8"
+                        y1="3"
+                        y2="21"
+                      />
+                      <line
+                        x1="16"
+                        x2="14"
+                        y1="3"
+                        y2="21"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="w-10 text-center"
+                  role="columnheader"
                 >
-                  Track 2
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:31
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              3
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex w-full items-center justify-center"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="lucide lucide-image h-4 w-4"
+                      fill="none"
+                      height="24"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        height="18"
+                        rx="2"
+                        ry="2"
+                        width="18"
+                        x="3"
+                        y="3"
+                      />
+                      <circle
+                        cx="9"
+                        cy="9"
+                        r="2"
+                      />
+                      <path
+                        d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="px-2 text-left cursor-pointer"
+                  role="columnheader"
                 >
-                  Track 3
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:32
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              4
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex items-center"
+                  >
+                    Artist
+                  </span>
+                </th>
+                <th
+                  class="px-2 text-left cursor-pointer"
+                  role="columnheader"
                 >
-                  Track 4
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:33
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              5
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex items-center"
+                  >
+                    Title
+                  </span>
+                </th>
+                <th
+                  class="px-2 text-left cursor-pointer"
+                  role="columnheader"
                 >
-                  Track 5
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:34
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              6
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex items-center"
+                  >
+                    Album
+                  </span>
+                </th>
+                <th
+                  class="px-2 text-left cursor-pointer"
+                  role="columnheader"
                 >
-                  Track 6
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:35
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              7
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <span
+                    class="flex items-center"
+                  >
+                    Duration
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
                 >
-                  Track 7
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:36
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              8
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  1
+                </td>
+                <td
+                  class="w-10 text-center"
                 >
-                  Track 8
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:37
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              9
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
                 >
-                  Track 9
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:38
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              10
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
                 >
-                  Track 10
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:39
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              11
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 1
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
                 >
-                  Track 11
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:40
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              12
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
                 >
-                  Track 12
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:41
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              13
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="truncate"
+                  >
+                    0:30
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
                 >
-                  Track 13
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:42
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              14
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  2
+                </td>
+                <td
+                  class="w-10 text-center"
                 >
-                  Track 14
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:43
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              15
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
                 >
-                  Track 15
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:44
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              16
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
                 >
-                  Track 16
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:45
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              17
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 2
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:31
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  3
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 3
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:32
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  4
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 4
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:33
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  5
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 5
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:34
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  6
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 6
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:35
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  7
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 7
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:36
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  8
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 8
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:37
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  9
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 9
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:38
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  10
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 10
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:39
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  11
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 11
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:40
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  12
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 12
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:41
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  13
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 13
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:42
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  14
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 14
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:43
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  15
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 15
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:44
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  16
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 16
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:45
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  17
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 17
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:46
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  18
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 18
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:47
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
+                >
+                  19
+                </td>
+                <td
+                  class="w-10 text-center"
+                >
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
+                >
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 19
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:48
+                  </div>
+                </td>
+              </tr>
+              <tr
+                aria-describedby=""
+                aria-disabled="true"
+                aria-roledescription="sortable"
+                class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+                data-testid="track-row"
+                role="button"
+                style="height: 42px;"
+                tabindex="0"
+              >
+                <td
+                  class="min-w-10 text-center"
                 >
-                  Track 17
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:46
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              18
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  20
+                </td>
+                <td
+                  class="w-10 text-center"
                 >
-                  Track 18
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:47
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              19
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="flex w-full justify-center"
+                  >
+                    <img
+                      class="w-10 min-w-10"
+                      src="https://i.imgur.com/4euOws2.jpg"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
                 >
-                  Track 19
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:48
-              </div>
-            </td>
-          </tr>
-          <tr
-            aria-describedby=""
-            aria-disabled="true"
-            aria-roledescription="sortable"
-            class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-            data-testid="track-row"
-            role="button"
-            style="height: 42px;"
-            tabindex="0"
-          >
-            <td
-              class="min-w-10 text-center"
-            >
-              20
-            </td>
-            <td
-              class="w-10 text-center"
-            >
-              <div
-                class="flex w-full justify-center"
-              >
-                <img
-                  class="w-10 min-w-10"
-                  src="https://i.imgur.com/4euOws2.jpg"
-                />
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Frank Zappa
-              </div>
-            </td>
-            <td
-              class="truncate px-2"
-            >
-              <div
-                class="flex items-center justify-between gap-2"
-              >
-                <button
-                  class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  <div
+                    class="truncate"
+                  >
+                    Frank Zappa
+                  </div>
+                </td>
+                <td
+                  class="truncate px-2"
                 >
-                  Track 20
-                </button>
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                Album
-              </div>
-            </td>
-            <td
-              class="cursor-default truncate px-2"
-            >
-              <div
-                class="truncate"
-              >
-                0:49
-              </div>
-            </td>
-          </tr>
-          <tr
-            class="border-none"
-            style="height: 20160px;"
-          >
-            <td
-              colspan="6"
-            />
-          </tr>
-        </tbody>
-      </table>
+                  <div
+                    class="flex items-center justify-between gap-2"
+                  >
+                    <button
+                      class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                    >
+                      Track 20
+                    </button>
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    Album
+                  </div>
+                </td>
+                <td
+                  class="cursor-default truncate px-2"
+                >
+                  <div
+                    class="truncate"
+                  >
+                    0:49
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="border-none"
+                style="height: 20160px;"
+              >
+                <td
+                  colspan="6"
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -3060,454 +3092,462 @@ exports[`TrackTable > (Snapshot) LargeDataset 1`] = `
 exports[`TrackTable > (Snapshot) Toolbar 1`] = `
 <DocumentFragment>
   <div
-    class="flex items-center gap-2 mb-2"
+    class="flex h-full flex-col"
   >
-    <div>
-      <button
-        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
-        data-headlessui-state=""
-        data-testid="play-all-button"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="lucide lucide-play"
-          fill="none"
-          height="16"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="3"
-          viewBox="0 0 24 24"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
-          />
-        </svg>
-      </button>
-    </div>
-    <div>
-      <button
-        class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
-        data-headlessui-state=""
-        data-testid="add-all-to-queue-button"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="lucide lucide-plus"
-          fill="none"
-          height="16"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="3"
-          viewBox="0 0 24 24"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5 12h14"
-          />
-          <path
-            d="M12 5v14"
-          />
-        </svg>
-      </button>
-    </div>
     <div
-      class="ml-auto inline-flex w-full max-w-sm items-stretch"
+      class="flex items-center gap-2 mb-2 shrink-0"
     >
+      <div>
+        <button
+          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-(length:--border-width) hover:shadow-none size-10 justify-center"
+          data-headlessui-state=""
+          data-testid="play-all-button"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="lucide lucide-play"
+            fill="none"
+            height="16"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="3"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div>
+        <button
+          class="inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50 border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y bg-background text-foreground border-(length:--border-width) hover:shadow-none size-10 justify-center"
+          data-headlessui-state=""
+          data-testid="add-all-to-queue-button"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="lucide lucide-plus"
+            fill="none"
+            height="16"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="3"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 12h14"
+            />
+            <path
+              d="M12 5v14"
+            />
+          </svg>
+        </button>
+      </div>
       <div
-        class="flex w-full flex-col gap-2"
+        class="ml-auto inline-flex w-full max-w-sm items-stretch"
       >
         <div
-          class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
+          class="flex w-full flex-col gap-2"
         >
-          <input
-            class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-            data-headlessui-state=""
-            id="input-:r8:"
-            placeholder="Filter tracks"
-            type="text"
-            value=""
-          />
           <div
-            class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
-          >
-            <svg
-              aria-hidden="true"
-              class="lucide lucide-funnel h-4 w-4"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="3"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="relative flex max-h-full w-full overflow-y-auto"
-    data-test-resize-observer-block-size="504"
-    data-test-resize-observer-inline-size="1024"
-  >
-    <table
-      class="border-border relative w-full table-fixed border-(length:--border-width)"
-      role="table"
-    >
-      <thead>
-        <tr
-          class="border-border bg-primary border-b-(length:--border-width)"
-          role="row"
-        >
-          <th
-            class="w-10 text-center cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex w-full items-center justify-center"
-            >
-              <svg
-                aria-hidden="true"
-                class="lucide lucide-hash h-4 w-4"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="9"
-                  y2="9"
-                />
-                <line
-                  x1="4"
-                  x2="20"
-                  y1="15"
-                  y2="15"
-                />
-                <line
-                  x1="10"
-                  x2="8"
-                  y1="3"
-                  y2="21"
-                />
-                <line
-                  x1="16"
-                  x2="14"
-                  y1="3"
-                  y2="21"
-                />
-              </svg>
-            </span>
-          </th>
-          <th
-            class="w-10 text-center"
-            role="columnheader"
+            class="border-border inline-flex w-full items-stretch overflow-hidden rounded-md border-(length:--border-width) has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-black has-[:focus-visible]:ring-offset-2"
           >
-            <span
-              class="flex w-full items-center justify-center"
+            <input
+              class="border-border text-foreground placeholder:text-foreground-secondary w-full px-3 transition-colors focus-visible:ring-black focus-visible:outline-none bg-background-input h-9 text-sm rounded-l border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+              data-headlessui-state=""
+              id="input-:r8:"
+              placeholder="Filter tracks"
+              type="text"
+              value=""
+            />
+            <div
+              class="bg-primary border-border flex items-center gap-2 border-l-(length:--border-width) px-3 text-sm"
             >
               <svg
                 aria-hidden="true"
-                class="lucide lucide-image h-4 w-4"
+                class="lucide lucide-funnel h-4 w-4"
                 fill="none"
                 height="24"
                 stroke="currentColor"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                stroke-width="2"
+                stroke-width="3"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <rect
-                  height="18"
-                  rx="2"
-                  ry="2"
-                  width="18"
-                  x="3"
-                  y="3"
-                />
-                <circle
-                  cx="9"
-                  cy="9"
-                  r="2"
-                />
                 <path
-                  d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                  d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
                 />
               </svg>
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Artist
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Title
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Album
-            </span>
-          </th>
-          <th
-            class="px-2 text-left cursor-pointer"
-            role="columnheader"
-          >
-            <span
-              class="flex items-center"
-            >
-              Duration
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            1
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
-              >
-                Track 1
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:30
             </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="relative h-full w-full min-h-0 flex-1"
+    >
+      <div
+        class="scrollbar-hide flex h-full w-full flex-col overflow-auto"
+        data-test-resize-observer-block-size="504"
+        style="scrollbar-width: none;"
+      >
+        <table
+          class="border-border relative w-full table-fixed border-(length:--border-width)"
+          role="table"
         >
-          <td
-            class="min-w-10 text-center"
-          >
-            2
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
+          <thead>
+            <tr
+              class="border-border bg-primary border-b-(length:--border-width)"
+              role="row"
             >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+              <th
+                class="w-10 text-center cursor-pointer"
+                role="columnheader"
               >
-                Track 2
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:31
-            </div>
-          </td>
-        </tr>
-        <tr
-          aria-describedby=""
-          aria-disabled="true"
-          aria-roledescription="sortable"
-          class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
-          data-testid="track-row"
-          role="button"
-          style="height: 42px;"
-          tabindex="0"
-        >
-          <td
-            class="min-w-10 text-center"
-          >
-            3
-          </td>
-          <td
-            class="w-10 text-center"
-          >
-            <div
-              class="flex w-full justify-center"
-            >
-              <img
-                class="w-10 min-w-10"
-                src="https://i.imgur.com/4euOws2.jpg"
-              />
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Frank Zappa
-            </div>
-          </td>
-          <td
-            class="truncate px-2"
-          >
-            <div
-              class="flex items-center justify-between gap-2"
-            >
-              <button
-                class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-hash h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="9"
+                      y2="9"
+                    />
+                    <line
+                      x1="4"
+                      x2="20"
+                      y1="15"
+                      y2="15"
+                    />
+                    <line
+                      x1="10"
+                      x2="8"
+                      y1="3"
+                      y2="21"
+                    />
+                    <line
+                      x1="16"
+                      x2="14"
+                      y1="3"
+                      y2="21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="w-10 text-center"
+                role="columnheader"
+              >
+                <span
+                  class="flex w-full items-center justify-center"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-image h-4 w-4"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      height="18"
+                      rx="2"
+                      ry="2"
+                      width="18"
+                      x="3"
+                      y="3"
+                    />
+                    <circle
+                      cx="9"
+                      cy="9"
+                      r="2"
+                    />
+                    <path
+                      d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Artist
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Title
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Album
+                </span>
+              </th>
+              <th
+                class="px-2 text-left cursor-pointer"
+                role="columnheader"
+              >
+                <span
+                  class="flex items-center"
+                >
+                  Duration
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                1
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
               >
-                Track 3
-              </button>
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              Album
-            </div>
-          </td>
-          <td
-            class="cursor-default truncate px-2"
-          >
-            <div
-              class="truncate"
-            >
-              0:32
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 1
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:30
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                2
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 2
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:31
+                </div>
+              </td>
+            </tr>
+            <tr
+              aria-describedby=""
+              aria-disabled="true"
+              aria-roledescription="sortable"
+              class="border-border bg-background-secondary group border-b-(length:--border-width) select-none"
+              data-testid="track-row"
+              role="button"
+              style="height: 42px;"
+              tabindex="0"
+            >
+              <td
+                class="min-w-10 text-center"
+              >
+                3
+              </td>
+              <td
+                class="w-10 text-center"
+              >
+                <div
+                  class="flex w-full justify-center"
+                >
+                  <img
+                    class="w-10 min-w-10"
+                    src="https://i.imgur.com/4euOws2.jpg"
+                  />
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Frank Zappa
+                </div>
+              </td>
+              <td
+                class="truncate px-2"
+              >
+                <div
+                  class="flex items-center justify-between gap-2"
+                >
+                  <button
+                    class="min-w-0 flex-1 cursor-pointer truncate text-left hover:underline"
+                  >
+                    Track 3
+                  </button>
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  Album
+                </div>
+              </td>
+              <td
+                class="cursor-default truncate px-2"
+              >
+                <div
+                  class="truncate"
+                >
+                  0:32
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;