SongTable: fix scrolling issue
This commit is contained in:
@@ -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,
|
||||||
})}>
|
})}>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user