fix playqueue flex sizing

This commit is contained in:
jeffvli
2025-11-12 20:46:24 -08:00
parent ee1803448c
commit 219c650585
2 changed files with 7 additions and 5 deletions
@@ -12,6 +12,7 @@ import {
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop'; import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
import { useListSettings, usePlayerQueue } from '/@/renderer/store'; import { useListSettings, usePlayerQueue } from '/@/renderer/store';
import { searchSongs } from '/@/renderer/utils/search-songs'; import { searchSongs } from '/@/renderer/utils/search-songs';
import { Box } from '/@/shared/components/box/box';
import { Flex } from '/@/shared/components/flex/flex'; import { Flex } from '/@/shared/components/flex/flex';
import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay'; import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay';
import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types'; 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; const isEmpty = data.length === 0;
return ( return (
<> <Box className="play-queue" pos="relative" style={{ flex: 1, minHeight: 0 }} w="100%">
<LoadingOverlay pos="absolute" visible={isFetching} /> <LoadingOverlay pos="absolute" visible={isFetching} />
<ItemTableList <ItemTableList
autoFitColumns={table.autoFitColumns}
CellComponent={ItemTableListColumn} CellComponent={ItemTableListColumn}
columns={table.columns} columns={table.columns}
data={data || []} data={data || []}
@@ -93,7 +95,7 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
size={table.size} size={table.size}
/> />
{isEmpty && <EmptyQueueDropZone />} {isEmpty && <EmptyQueueDropZone />}
</> </Box>
); );
}); });
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue'; import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls'; 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'; import { ItemListKey } from '/@/shared/types/types';
export const SidebarPlayQueue = () => { export const SidebarPlayQueue = () => {
@@ -10,7 +10,7 @@ export const SidebarPlayQueue = () => {
const [search, setSearch] = useState<string | undefined>(undefined); const [search, setSearch] = useState<string | undefined>(undefined);
return ( return (
<Flex direction="column" h="100%" w="100%"> <Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
<PlayQueueListControls <PlayQueueListControls
handleSearch={setSearch} handleSearch={setSearch}
searchTerm={search} searchTerm={search}
@@ -18,6 +18,6 @@ export const SidebarPlayQueue = () => {
type={ItemListKey.SIDE_QUEUE} type={ItemListKey.SIDE_QUEUE}
/> />
<PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} /> <PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} />
</Flex> </Stack>
); );
}; };