Fix header being squished by table

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -8,7 +8,12 @@ import type {
   RowDoubleClickedEvent,
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components';
+import {
+  getColumnDefs,
+  TablePagination,
+  VirtualGridAutoSizerContainer,
+  VirtualTable,
+} from '/@/renderer/components';
 import {
   useCurrentServer,
   usePlaylistDetailStore,
@@ -185,7 +190,7 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
   };
 
   return (
-    <>
+    <VirtualGridAutoSizerContainer>
       <VirtualTable
         // https://github.com/ag-grid/ag-grid/issues/5284
         // Key is used to force remount of table when display, rowHeight, or server changes
@@ -222,6 +227,6 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
           />
         )}
       </AnimatePresence>
-    </>
+    </VirtualGridAutoSizerContainer>
   );
 };

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Group, Stack } from '@mantine/core';
+import { Group } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { AnimatePresence, motion, Variants } from 'framer-motion';
 import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
@@ -13,7 +13,7 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
 import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
-import { Button, Paper, Text, toast } from '/@/renderer/components';
+import { Button, Paper, Text, toast, VirtualGridContainer } from '/@/renderer/components';
 import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
 import { useCurrentServer } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/api/types';
@@ -137,10 +137,7 @@ const PlaylistDetailSongListRoute = () => {
 
   return (
     <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
-      <Stack
-        h="100%"
-        spacing={0}
-      >
+      <VirtualGridContainer>
         <PlaylistDetailSongListHeader
           handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
           tableRef={tableRef}
@@ -194,7 +191,7 @@ const PlaylistDetailSongListRoute = () => {
           )}
         </AnimatePresence>
         <PlaylistDetailSongListContent tableRef={tableRef} />
-      </Stack>
+      </VirtualGridContainer>
     </AnimatedPage>
   );
 };