Fixes odd expander button size issue

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%;
-}

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} />