Fix loading spinner not covering scrollable content

Author: RadValentin

frontend/src/components/Player.css

@@ -62,9 +62,18 @@
     margin-bottom: 1rem;
   }
 
+  /* Recommendations drawer */
   & .player-recommendations {
     position: relative;
-    padding: 1rem;
+    overflow: hidden;
+
+    /* We need a way to overlay the loading spinner on top of scrollable content:
+      make the parent non scrollable, and the content scrollable. */
+    & .recommendations-content {
+      overflow: auto;
+      height: 100%;
+      padding: 1rem;
+    }
 
     & .heading {
       color: white;

frontend/src/components/Player.tsx

@@ -283,10 +283,22 @@ export default function Player({ ref }: PlayerProps) {
     return (
       <div className="player-recommendations">
         {recState.isLoading && <LoadingSpinner />}
-        <div className="heading">Up Next:</div>
-        <TrackItem key={firstRec.mbid} track={firstRec} onPlay={() => {playTrack(firstRec)}} />
-        <div className="heading">Other recommendations:</div>
-        {otherRec.map(track => <TrackItem key={track.mbid} track={track} onPlay={() => {playTrack(track)}} disabled={recState.isLoading} />)}
+        <div className="recommendations-content">
+          <div className="heading">Up Next:</div>
+          <TrackItem
+            key={firstRec.mbid}
+            track={firstRec}
+            onPlay={() => { playTrack(firstRec) }}
+            disabled={recState.isLoading} />
+          <div className="heading">Other recommendations:</div>
+          {otherRec.map(track =>
+            <TrackItem
+              key={track.mbid}
+              track={track}
+              onPlay={() => { playTrack(track) }}
+              disabled={recState.isLoading} />
+          )}
+        </div>
       </div>
     );
   };