styles to add scroll bar on slides

src/renderer/components/available-versions/available-versions-slide.component.tsx

@@ -21,8 +21,8 @@ export function AvailableVersionsSlide(props: {year: string}) {
 
 
   return (
-    <div className="w-full max-w-full h-fit shrink-0 flex items-center justify-center content-center">
-      <div className="flex justify-center items-center content-center flex-wrap max-w-6xl">
+    <div className="w-full max-w-full max-h-full shrink-0 flex items-start justify-center overflow-x-hidden overflow-y-scroll content-start scrollbar-thin hover:scrollbar-thumb-neutral-900">
+      <div className="relative left-[2px] flex justify-center items-start content-start flex-wrap max-w-6xl">
         {availableVersions.map((version, index) =>
           <AvailableVersionItem key={index} version={version}></AvailableVersionItem>
         )}

src/renderer/components/available-versions/available-versions-slider.component.tsx

@@ -25,9 +25,9 @@ export function AvailableVersionsSlider({setSelectedVersion}: {setSelectedVersio
   }, [])
 
   return (
-    <div className="w-full h-fit relative flex flex-col">
+    <div className="w-full h-fit max-h-full relative flex flex-col items-center grow min-h-0">
       <AvailableVersionsNavBar years={availableYears} setSelectedYear={setSelectedYear}></AvailableVersionsNavBar>
-      <div className="w-full h-fit flex transition-transform duration-700" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
+      <div className="w-full min-h-0 flex transition-transform duration-700" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
         { availableYears.map((year, index) =>
           <AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
         )}

src/renderer/pages/available-versions-list.components.tsx

@@ -28,10 +28,9 @@ export function AvailableVersionsList() {
   }
 
   return (
-    <div>
+    <div className="h-full">
       <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
-      <div className=" relative z-[1]">
-        <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh mb-5">SELECT A VERSION</h1>
+      <div className="relative z-[1] max-h-full flex flex-col pt-7">
         <AvailableVersionsSlider setSelectedVersion={selectedVersionCallback}/>
       </div>
     </div>