Merge pull request #12 from marsinearth:bugfix/mobile-modal-size-for-…

…scrollbar

add: html body overflow control with modal on/off

src/components/AlbumCard.tsx

@@ -22,6 +22,14 @@ function AlbumCard({
   disconnected,
   setAlbum,
 }: AlbumCardProps) {
+  const onCloseModal = () => {
+    setAlbum(index);
+    const body = document.querySelector("body");
+    if (body) {
+      body.style.overflow = "auto";
+    }
+  };
+
   return (
     <ImageLoader
       className="albumCardContainer"
@@ -30,9 +38,7 @@ function AlbumCard({
       disconnected={disconnected}
       data-tooltip-content={`${album_artist}: ${track_title}`}
       style={{ maxWidth: 400, maxHeight: 400, border: "1px outset #dddddd" }}
-      onClick={() => {
-        setAlbum(index);
-      }}
+      onClick={onCloseModal}
     >
       <div
         className="albumCardPlayingNowOverlay"

src/components/AudioPlayer.tsx

@@ -83,6 +83,10 @@ const AudioPlayer = forwardRef<ReactH5AudioPlayer, AudioPlayerProps>(
 
     const onOpenModal = useCallback(() => {
       setModalOpen(true);
+      const body = document.querySelector("body");
+      if (body) {
+        body.style.overflow = "hidden";
+      }
     }, []);
 
     useEffect(() => {

src/styles/AlbumCard.css

@@ -14,21 +14,21 @@
 
 @media screen and (min-width: 769px) {
   .imgContainer.albumCardContainer {
-    width: calc((100vw - 27px) / 5);
-    height: calc((100vw - 27px) / 5);
+    width: calc((100vw - 24px) / 5);
+    height: calc((100vw - 24px) / 5);
   }
 }
 
 @media screen and (max-width: 768px) {
   .imgContainer.albumCardContainer {
-    width: calc((100vw - 27px) / 3);
-    height: calc((100vw - 27px) / 3);
+    width: calc((100vw - 24px) / 3);
+    height: calc((100vw - 24px) / 3);
   }
 }
 
 @media screen and (max-width: 480px) {
   .imgContainer.albumCardContainer {
-    width: calc((100vw - 27px) / 2);
-    height: calc((100vw - 27px) / 2);
+    width: calc((100vw - 24px) / 2);
+    height: calc((100vw - 24px) / 2);
   }
 }