Adjust playqueue styles

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -88,6 +88,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
       px="1rem"
       py="1rem"
       sx={{ alignItems: 'center' }}
+      w="100%"
     >
       <Group>
         <Button
@@ -137,7 +138,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
         </Button>
       </Group>
       <Group>
-        <Popover>
+        <Popover transition="fade">
           <Popover.Target>
             <Button
               compact

src/renderer/features/now-playing/components/play-queue.tsx

@@ -29,6 +29,7 @@ import {
 } from '/@/renderer/store/settings.store';
 import { useMergedRef } from '@mantine/hooks';
 import isElectron from 'is-electron';
+import debounce from 'lodash/debounce';
 import { ErrorBoundary } from 'react-error-boundary';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
 import { ErrorFallback } from '/@/renderer/features/action-required';
@@ -131,13 +132,13 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
 
     const updatedColumns = [];
     for (const column of columnsOrder) {
-      const columnInSettings = columnsInSettings.find((c) => c.column === column.colId);
+      const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
 
       if (columnInSettings) {
         updatedColumns.push({
           ...columnInSettings,
           ...(!useSettingsStore.getState().tables[type].autoFit && {
-            width: column.actualWidth,
+            width: column.getActualWidth(),
           }),
         });
       }
@@ -154,6 +155,8 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
     });
   };
 
+  const debouncedColumnChange = debounce(handleColumnChange, 250);
+
   const handleGridSizeChange = () => {
     if (tableConfig.autoFit) {
       tableRef?.current?.api.sizeColumnsToFit();
@@ -233,7 +236,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
             rowSelection="multiple"
             onCellDoubleClicked={handleDoubleClick}
             onColumnMoved={handleColumnChange}
-            onColumnResized={handleColumnChange}
+            onColumnResized={debouncedColumnChange}
             onDragStarted={handleDragStart}
             onGridReady={handleGridReady}
             onGridSizeChanged={handleGridSizeChange}

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Stack } from '@mantine/core';
+import { Box, Stack } from '@mantine/core';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
@@ -10,10 +10,18 @@ export const SidebarPlayQueue = () => {
 
   return (
     <Stack
-      pb="1rem"
-      pt="2.5rem"
-      sx={{ height: '100%' }}
+      h="100%"
+      spacing={0}
+      sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
     >
+      <Box
+        h="50px"
+        mr="160px"
+        sx={{
+          '-webkit-app-region': 'drag',
+          zIndex: -1,
+        }}
+      />
       <PlayQueue
         ref={queueRef}
         type="sideQueue"