From 219c6505856154c0b6d2fb522c0dfa96e6bc1fe7 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 12 Nov 2025 20:46:24 -0800
Subject: [PATCH] fix playqueue flex sizing

---
 src/renderer/features/now-playing/components/play-queue.tsx | 6 ++++--
 .../features/now-playing/components/sidebar-play-queue.tsx  | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx
index 04643eebb..26b774c3e 100644
--- a/src/renderer/features/now-playing/components/play-queue.tsx
+++ b/src/renderer/features/now-playing/components/play-queue.tsx
@@ -12,6 +12,7 @@ import {
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { useListSettings, usePlayerQueue } from '/@/renderer/store';
 import { searchSongs } from '/@/renderer/utils/search-songs';
+import { Box } from '/@/shared/components/box/box';
 import { Flex } from '/@/shared/components/flex/flex';
 import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
@@ -69,9 +70,10 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
     const isEmpty = data.length === 0;
 
     return (
-        <>
+        <Box className="play-queue" pos="relative" style={{ flex: 1, minHeight: 0 }} w="100%">
             <LoadingOverlay pos="absolute" visible={isFetching} />
             <ItemTableList
+                autoFitColumns={table.autoFitColumns}
                 CellComponent={ItemTableListColumn}
                 columns={table.columns}
                 data={data || []}
@@ -93,7 +95,7 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
                 size={table.size}
             />
             {isEmpty && <EmptyQueueDropZone />}
-        </>
+        </Box>
     );
 });
 
diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
index e017ff3a6..f0a046b3d 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
-import { Flex } from '/@/shared/components/flex/flex';
+import { Stack } from '/@/shared/components/stack/stack';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const SidebarPlayQueue = () => {
@@ -10,7 +10,7 @@ export const SidebarPlayQueue = () => {
     const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
-        <Flex direction="column" h="100%" w="100%">
+        <Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
             <PlayQueueListControls
                 handleSearch={setSearch}
                 searchTerm={search}
@@ -18,6 +18,6 @@ export const SidebarPlayQueue = () => {
                 type={ItemListKey.SIDE_QUEUE}
             />
             <PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} />
-        </Flex>
+        </Stack>
     );
 };