From 1f6c90657617a459a3ce99431fe4df37c12ad33a Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Mon, 15 Jul 2024 22:29:44 -0500
Subject: [PATCH] Fixes odd expander button size issue

---
 src/App.css                    | 33 +++++++++++++++++++--------------
 src/components/AlbumPlayer.tsx |  4 ++--
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6603f90..f6239d9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -35,6 +35,25 @@
   transition: height 2s;
 }
 
+.player-container {
+  background: rgba(0,0,0,0.5);
+  position: sticky;
+  width: 100%;
+  bottom:0;
+}
+
+.expander {
+  align-self: center;
+  height:.75em;
+  aspect-ratio: 1 / 1;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 500%;
+}
+
 .album-title {
   font-size: larger;
 }
@@ -42,17 +61,3 @@
 .bold-title {
   font-weight: bold;
 }
-
-.expander {
-  position: absolute;
-  height: 8vmin;
-  width: 8vmin;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 50%;
-  margin-top: 1vmin;
-  margin-left: 5vmin;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 500%;
-}
diff --git a/src/components/AlbumPlayer.tsx b/src/components/AlbumPlayer.tsx
index 86c528d..70d1dc5 100644
--- a/src/components/AlbumPlayer.tsx
+++ b/src/components/AlbumPlayer.tsx
@@ -37,9 +37,9 @@ export default function AlbumPlayer(props: Readonly<AlbumPlayerProps>) {
   if(props.albumHash && album) {
     console.log(album)
     return (
-        <div className={"player"}>
+        <div className={"player-container"}>
           <div className={`expander`} onClick={handleAlbumInfoAdjust} id={"maximizer"}>{isShowAlbumInfo ? <img src={minimize} alt={'minimize song text'}/> : <img src={maximize} alt={'show full album information'}/>}</div>
-          {isShowAlbumInfo ? <AlbumInfoDisplay albumInfo={props.albumInfo} trackNumber={trackNum} /> : <TrackInfoDisplay artist={album.trackList[trackNum].trackArtist} track={album.trackList[trackNum].trackTitle} />}
+          <div>{isShowAlbumInfo ? <AlbumInfoDisplay albumInfo={props.albumInfo} trackNumber={trackNum} /> : <TrackInfoDisplay artist={album.trackList[trackNum].trackArtist} track={album.trackList[trackNum].trackTitle} />}</div>
           <audio title={album.trackList[trackNum].trackTitle} controls={true} autoPlay={true} preload={"metadata"}
                  src={`${hostName}/music/album/${props.albumHash}/track/${trackNum}`}
                  onEnded={handleNextTrack} />