From 2158e93083e9ac35ac074cf19eb5e7dba3452ac8 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 5 Jun 2022 22:46:16 +0200
Subject: [PATCH] styles to add scroll bar on slides

---
 .../available-versions-slide.component.tsx                   | 4 ++--
 .../available-versions-slider.component.tsx                  | 4 ++--
 src/renderer/pages/available-versions-list.components.tsx    | 5 ++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/available-versions/available-versions-slide.component.tsx b/src/renderer/components/available-versions/available-versions-slide.component.tsx
index 2b0a687d..ed45eddc 100644
--- a/src/renderer/components/available-versions/available-versions-slide.component.tsx
+++ b/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>
         )}
diff --git a/src/renderer/components/available-versions/available-versions-slider.component.tsx b/src/renderer/components/available-versions/available-versions-slider.component.tsx
index c3cba009..03a6f247 100644
--- a/src/renderer/components/available-versions/available-versions-slider.component.tsx
+++ b/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>
         )}
diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index ad019eb0..b9c8bf22 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/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>