From 8d72596a335b69199be6d6fa4ef323c36d131cdd Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 24 Nov 2025 22:58:29 -0800
Subject: [PATCH] attempt to fix playqueue initial height issue

---
 .../now-playing/components/play-queue.tsx         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx
index 3be248fc8..1558a1412 100644
--- a/src/renderer/features/now-playing/components/play-queue.tsx
+++ b/src/renderer/features/now-playing/components/play-queue.tsx
@@ -41,6 +41,7 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
 
     const isFetching = useIsPlayerFetching();
     const tableRef = useRef<ItemListHandle>(null);
+    const previousSongCountRef = useRef<number>(0);
     const mergedRef = useMergedRef(ref, tableRef);
     const { getQueue } = usePlayerActions();
     const queueType = usePlayerQueueType();
@@ -49,6 +50,7 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
 
     const [data, setData] = useState<QueueSong[]>([]);
     const [groups, setGroups] = useState<TableGroupHeader[]>([]);
+    const [containerKey, setContainerKey] = useState<string>(() => Math.random().toString(36));
 
     useEffect(() => {
         const setQueue = () => {
@@ -105,6 +107,17 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
         };
     }, [getQueue, queueType, tableRef]);
 
+    useEffect(() => {
+        const currentCount = data.length;
+        const previousCount = previousSongCountRef.current;
+
+        if (previousCount === 0 && currentCount > 0) {
+            setContainerKey(Math.random().toString(36));
+        }
+
+        previousSongCountRef.current = currentCount;
+    }, [data.length]);
+
     const filteredData: QueueSong[] = useMemo(() => {
         if (debouncedSearchTerm) {
             const searched = searchLibraryItems(data, debouncedSearchTerm, LibraryItem.SONG);
@@ -128,7 +141,7 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
     const currentSongUniqueId = currentSong?._uniqueId;
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} key={containerKey}>
             <LoadingOverlay pos="absolute" visible={isFetching} />
             <ItemTableList
                 activeRowId={currentSongUniqueId}