From 8ab927333ba7fb4907ebd7b7681db5bbc8eac2ca Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Sun, 23 Feb 2025 17:03:29 -0800
Subject: [PATCH] SongTable: fix scrolling issue

---
 frontend/src/components/SongRow.tsx   | 3 ++-
 frontend/src/components/SongTable.tsx | 2 +-
 frontend/src/components/TabView.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/SongRow.tsx b/frontend/src/components/SongRow.tsx
index 3d4c711..8fc8135 100644
--- a/frontend/src/components/SongRow.tsx
+++ b/frontend/src/components/SongRow.tsx
@@ -39,7 +39,8 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
   const displayTitle = getDisplayTitle(song);
   
   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),
       "bg-black/30": playState === PlayState.NotPlaying,
     })}>
diff --git a/frontend/src/components/SongTable.tsx b/frontend/src/components/SongTable.tsx
index 7113068..ce0cd76 100644
--- a/frontend/src/components/SongTable.tsx
+++ b/frontend/src/components/SongTable.tsx
@@ -21,7 +21,7 @@ const SongTable: React.FC<SongTableProps> = ({ songs, isPlaying, onDelete, onSki
   }, [nowPlayingIndex]);
 
   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) => (
         <SongRow 
           key={index} 
diff --git a/frontend/src/components/TabView.tsx b/frontend/src/components/TabView.tsx
index dafed1f..d258c8a 100644
--- a/frontend/src/components/TabView.tsx
+++ b/frontend/src/components/TabView.tsx
@@ -26,7 +26,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
   ) as React.ReactElement<TabProps<T>>[];
 
   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">
         {tabs.map((tab, index) => {
           const isSelected = selectedTab === tab.props.identifier;
@@ -47,7 +47,7 @@ export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps
           );
         })}
       </div>
-      <div className="flex-1">
+      <div className="flex-1 overflow-hidden">
         {tabs.map((tab, index) => (
           <div
             key={index}