From bf957b458734fa2d1adea26af5c1af9b6636fb67 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvain@mailo.com>
Date: Wed, 17 Apr 2024 09:48:28 +0200
Subject: [PATCH] fix: removed bottom scrollbar

---
 src/app/playlist/[playlistId]/page.tsx | 88 ++++++++++++++++----------
 1 file changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/app/playlist/[playlistId]/page.tsx b/src/app/playlist/[playlistId]/page.tsx
index 77c6523..6df1ccb 100644
--- a/src/app/playlist/[playlistId]/page.tsx
+++ b/src/app/playlist/[playlistId]/page.tsx
@@ -1,10 +1,10 @@
 'use client'
-import React, {useEffect, useRef, useState} from 'react'
+import React, { useEffect, useRef, useState } from 'react';
 
-import '../../global.css'
-import {useParams} from "next/navigation"
+import '../../global.css';
+import { useParams } from "next/navigation";
 import AudioPlayer from "@/components/audioPlayer";
-import {getTimeLength} from "@/app/utils/timeManipulator";
+import { getTimeLength } from "@/app/utils/timeManipulator";
 
 const AudioPlayerSkeleton = () => {
     return (
@@ -82,34 +82,54 @@ export default function Page(): React.JSX.Element {
     }
 
     return (
-        <main
-            className="flex h-screen w-screen flex-col content-center items-center justify-center bg-neutral-800 fill-white text-white">
-            <div className="flex w-full max-w-xl flex-col overflow-clip rounded-xl bg-neutral-500 shadow-xl">
-                <div className="p-6">
-                    {currentTrack ?
-                        <AudioPlayer track={currentTrack}
-                                     onNext={() => changeTrack('next')}
-                                     onPrev={() => changeTrack('prev')}></AudioPlayer> :
-                        <AudioPlayerSkeleton></AudioPlayerSkeleton>}
-                </div>
-                <div className="bg-neutral-600 p-3">
-                    {tracks ? (<div className="flex h-52 flex-col gap-1 overflow-scroll" ref={playlistDom}>
-                        {tracks?.map((track: any, index: number) => (
-                            <div key={track.uri}
-                                 className={"rounded-lg hover:bg-neutral-500 " + (currentTrack?.uri === track.uri && 'bg-neutral-700')}>
-                                <button className="flex w-full items-center gap-6 p-3" onClick={() => {
-                                    setCurrentTrackIndex(index)
-                                    setCurrentTrack(tracks?.at(index) ?? undefined)
-                                }}>
-                                    <div className="text-neutral-400">{index + 1}</div>
-                                    <div className="text-left">{track.name}</div>
-                                    <div className="ml-auto text-neutral-400">{getTimeLength(track.duration_ms)}</div>
-                                </button>
-                            </div>
-                        ))}
-                    </div>) : <PlaylistSkeleton></PlaylistSkeleton>}
-                </div>
-            </div>
-        </main>
-    )
+      <main className="flex h-screen w-screen flex-col content-center items-center justify-center bg-neutral-800 fill-white text-white">
+        <div className="flex w-full max-w-xl flex-col overflow-clip rounded-xl bg-neutral-500 shadow-xl">
+          <div className="p-6">
+            {currentTrack ? (
+              <AudioPlayer
+                track={currentTrack}
+                onNext={() => changeTrack("next")}
+                onPrev={() => changeTrack("prev")}
+              ></AudioPlayer>
+            ) : (
+              <AudioPlayerSkeleton></AudioPlayerSkeleton>
+            )}
+          </div>
+          <div className="bg-neutral-600 p-3">
+            {tracks ? (
+              <div
+                className="flex h-52 flex-col gap-1 overflow-y-scroll overflow-x-hidden"
+                ref={playlistDom}
+              >
+                {tracks?.map((track: any, index: number) => (
+                  <div
+                    key={track.uri}
+                    className={
+                      "rounded-lg hover:bg-neutral-500 " +
+                      (currentTrack?.uri === track.uri && "bg-neutral-700")
+                    }
+                  >
+                    <button
+                      className="flex w-full items-center gap-6 p-3"
+                      onClick={() => {
+                        setCurrentTrackIndex(index);
+                        setCurrentTrack(tracks?.at(index) ?? undefined);
+                      }}
+                    >
+                      <div className="text-neutral-400">{index + 1}</div>
+                      <div className="text-left">{track.name}</div>
+                      <div className="ml-auto text-neutral-400">
+                        {getTimeLength(track.duration_ms)}
+                      </div>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <PlaylistSkeleton></PlaylistSkeleton>
+            )}
+          </div>
+        </div>
+      </main>
+    );
 }
\ No newline at end of file