1 Commits
2.0.2 ... 2.0.3

Author SHA1 Message Date
8ab927333b SongTable: fix scrolling issue 2025-02-23 17:03:29 -08:00
3 changed files with 5 additions and 4 deletions

View File

@@ -39,7 +39,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
const displayTitle = getDisplayTitle(song); const displayTitle = getDisplayTitle(song);
return ( return (
<div className={classNames("flex flex-row w-full h-24 px-2 py-5 items-center border-b gap-2 transition-colors", { <div className={classNames(
"flex flex-row w-full h-20 px-2 py-2 items-center border-b gap-2 transition-colors shrink-0", {
"qc-highlighted": (playState === PlayState.Playing || playState === PlayState.Paused), "qc-highlighted": (playState === PlayState.Playing || playState === PlayState.Paused),
"bg-black/30": playState === PlayState.NotPlaying, "bg-black/30": playState === PlayState.NotPlaying,
})}> })}>

View File

@@ -21,7 +21,7 @@ const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSki
}, [nowPlayingIndex]); }, [nowPlayingIndex]);
return ( return (
<div className="flex flex-col w-full h-full overflow-y-auto border-y" ref={songTableRef}> <div className="flex flex-col w-full h-full overflow-y-auto" ref={songTableRef}>
{songs.map((song, index) => ( {songs.map((song, index) => (
<SongRow <SongRow
key={index} key={index}

View File

@@ -26,7 +26,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
) as React.ReactElement<TabProps<T>>[]; ) as React.ReactElement<TabProps<T>>[];
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col flex-1 overflow-hidden">
<div className="flex flex-row h-11 border-b border-white/20"> <div className="flex flex-row h-11 border-b border-white/20">
{tabs.map((tab, index) => { {tabs.map((tab, index) => {
const isSelected = selectedTab === tab.props.identifier; const isSelected = selectedTab === tab.props.identifier;
@@ -47,7 +47,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
); );
})} })}
</div> </div>
<div className="flex-1"> <div className="flex-1 overflow-hidden">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<div <div
key={index} key={index}