Fix some styling issues

Author: CalPinSW

backend/src/controllers/music_data.py

@@ -12,7 +12,6 @@
     search_playlists_by_albums,
     update_playlist_info,
 )
-from src.dataclasses.playlist import Playlist
 from src.spotify import SpotifyClient
 
 
@@ -78,11 +77,11 @@ def recent_playlists():
     def get_playlist(id):
         db_playlist = get_playlist_by_id_or_none(id)
         if db_playlist is not None:
-            return db_playlist.__data__
+            return make_response(jsonify(db_playlist.__data__), 200)
         else:
             access_token = request.cookies.get("spotify_access_token")
             playlist = spotify.get_playlist(access_token=access_token, id=id)
-            return playlist.model_dump()
+            return make_response(jsonify(playlist.to_dict()), 200)
 
     @music_controller.route("playlist/<id>", methods=["POST"])
     def post_edit_playlist(id):
@@ -156,24 +155,26 @@ def get_playback_info():
         if playback_info is None:
             return ("", 204)
         if playback_info.playlist_id is not None:
-            playlist_name = get_playlist_by_id_or_none(playback_info.playlist_id).name
-            playlist_duration = get_playlist_duration(playback_info.playlist_id)
-            playlist_progress = (
-                get_playlist_duration_up_to_track(
-                    playback_info.playlist_id, playback_info.track_id
+            playlist_info = get_playlist_by_id_or_none(playback_info.playlist_id)
+            if playlist_info:
+                playlist_name = playlist_info.name
+                playlist_duration = get_playlist_duration(playback_info.playlist_id)
+                playlist_progress = (
+                    get_playlist_duration_up_to_track(
+                        playback_info.playlist_id, playback_info.track_id
+                    )
+                    + playback_info.track_progress
                 )
-                + playback_info.track_progress
-            )
 
-            playback_info_with_playlist = playback_info.model_dump()
-            playback_info_with_playlist["playlist"] = {
-                "id": playback_info.playlist_id,
-                "title": playlist_name,
-                "progress": playlist_progress,
-                "duration": playlist_duration,
-            }
-            return playback_info_with_playlist
+                playback_info_with_playlist = playback_info.model_dump()
+                playback_info_with_playlist["playlist"] = {
+                    "id": playback_info.playlist_id,
+                    "title": playlist_name,
+                    "progress": playlist_progress,
+                    "duration": playlist_duration,
+                }
+                return playback_info_with_playlist
 
-        return playback_info.model_dump_json()
+            return playback_info.model_dump_json()
 
     return music_controller

frontend/src/playlistExplorer/AlbumList/AlbumList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { Album } from "../../interfaces/Album";
 import { AlbumContainer } from "./AlbumContainer";
 import { Playlist } from "../../interfaces/Playlist";
@@ -29,6 +29,12 @@ export const AlbumList: FC<AlbumListProps> = ({
     }
   }
   const selectedAlbumIndex = selectedAlbum ? albumList.findIndex((album) => album.id === selectedAlbum.id) : undefined;
+  const albumInfoRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (selectedAlbum && albumInfoRef.current) {
+      albumInfoRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [selectedAlbum]);
 
   return (
     <div>
@@ -43,9 +49,11 @@ export const AlbumList: FC<AlbumListProps> = ({
         )
       )}/>
       {selectedAlbum && 
-      <Box className="flex flex-col my-2"> 
-        <AlbumInfo album={selectedAlbum} />
-        <AlbumActions album={selectedAlbum} associatedPlaylists={associatedPlaylists} contextPlaylist={contextPlaylist} />
+      <Box className="my-2" > 
+        <div ref={albumInfoRef}>
+          <AlbumInfo album={selectedAlbum} />
+          <AlbumActions album={selectedAlbum} associatedPlaylists={associatedPlaylists} contextPlaylist={contextPlaylist} />
+        </div>
       </Box>}
     </div>
   );

frontend/src/playlistExplorer/PlaylistExplorer.tsx

@@ -65,7 +65,7 @@ export const PlaylistExplorer: FC = () => {
   const { playbackInfo } = usePlaybackContext();
 
   return (
-    <div className="m-2 text-sm sm:text-base space-y-4">
+    <div className="p-2 text-sm sm:text-base space-y-4">
       <Form
         onSubmit={() => {
           updatePlaylist(getValues());

frontend/src/presentational/Header/Header.tsx

@@ -14,7 +14,7 @@ const Header = () => {
   });
 
   return (
-    <div className="flex justify-between top-0 h-16 sm:h-20 bg-background-offset">
+    <div className="flex flex-shrink-0 justify-between h-16 sm:h-20 bg-background-offset">
       <Link to="/" className="flex mx-4 my-auto text-lg">
         Playlist Manager
       </Link>

frontend/src/presentational/Layout.tsx

@@ -5,9 +5,9 @@ import Header from "./Header/Header";
 
 const Layout = () => {
   return (
-    <div className="text-text-primary bg-background flex flex-col h-full w-full flex-nowrap overflow-none">
+    <div className="flex flex-col h-screen w-screen text-text-primary bg-background  ">
       <Header />
-      <div className="h-fit overflow-y-scroll inline-block">
+      <div className="flex-grow overflow-y-scroll">
         <Outlet />
       </div>
       <PlaybackFooter />

frontend/src/presentational/PlaybackFooter.tsx

@@ -17,7 +17,7 @@ const PlaybackFooter: FC = () => {
   }
 
   return (
-    <div className="w-full h-fit absolute bottom-0 bg-background-offset px-4 py-2 text-sm sm:text-base">
+    <div className="flex-shrink-0 w-full h-fit bg-background-offset px-4 py-2 text-sm sm:text-base">
       <div className="flex space-x-4 sm:space-x-6">
         <div className="flex flex-col space-y-2 w-1/5 max-w-32">
           <button className="opacity-80 w-full h-full" onClick={handlePausePlayClick}>