From b07e4c58b47b46e5b994a249457463f2bfbb7e82 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 17 Nov 2024 16:14:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20remove=20slider=20feat?=
 =?UTF-8?q?ure=20on=20small=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fit the slider content into small screen, by disabling all features
related to the slider. Good enough for a first draft.
---
 .../features/home/components/IntroSlider.tsx  | 21 ++++++++++++-------
 .../src/features/home/routes/Home.tsx         |  1 +
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx
index df39072d..0bb149ed 100644
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -74,6 +74,12 @@ const Container = styled('div', {
   },
 })
 
+const ButtonContainer = styled('div', {
+  base: {
+    display: { base: 'none', xsm: 'block' },
+  },
+})
+
 const ButtonVerticalCenter = styled('div', {
   base: {
     marginTop: '10.3125rem',
@@ -96,9 +102,9 @@ const Slide = styled('div', {
     alignItems: 'center',
     gap: '0.5rem',
     justifyContent: 'start',
-    minHeight: '550px',
-    minWidth: '200px',
-    width: '22.625rem',
+    minHeight: { base: 'none', xsm: '550px' },
+    minWidth: { base: 'none', xsm: '200px' },
+    width: { base: '100%', xsm: '22.625rem' },
   },
   variants: {
     visible: {
@@ -176,7 +182,7 @@ export const IntroSlider = () => {
           justifyContent: 'center',
         })}
       >
-        <div>
+        <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
               square
@@ -189,7 +195,7 @@ export const IntroSlider = () => {
               <RiArrowLeftSLine />
             </Button>
           </ButtonVerticalCenter>
-        </div>
+        </ButtonContainer>
         <SlideContainer>
           {SLIDES.map((slide, index) => (
             <Slide visible={index == slideIndex}>
@@ -212,7 +218,7 @@ export const IntroSlider = () => {
             </Slide>
           ))}
         </SlideContainer>
-        <div>
+        <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
               square
@@ -225,11 +231,12 @@ export const IntroSlider = () => {
               <RiArrowRightSLine />
             </Button>
           </ButtonVerticalCenter>
-        </div>
+        </ButtonContainer>
       </div>
       <div
         className={css({
           marginTop: '0.5rem',
+          display: { base: 'none', xsm: 'block' },
         })}
       >
         {SLIDES.map((_, index) => (
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index 21178707..d6429389 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -24,6 +24,7 @@ const Columns = ({ children }: { children?: ReactNode }) => {
     <div
       className={css({
         alignItems: 'center',
+        margin: 'auto',
         display: 'inline-flex',
         flexDirection: 'column',
         height: '100%',