@@ -1,5 +1,5 @@ 
 {
 	"latest": "3.6.8",
-	"lastUpdateCheck": 1635323207912,
-	"lastNotification": 1634735452492
+	"lastUpdateCheck": 1635762940319,
+	"lastNotification": 1635762618236
 }

@@ -18,20 +18,31 @@ 
   return (
     <Box
       className={clsx(className, classes.arrow)}
-      style={{...style, left, right}}
+      style={{
+        ...style,
+        left,
+        right,
+        display: 'flex',
+      }}
       onClick={onClick}
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
     />
   );
 };
 
 const useStyles = makeStyles(theme => ({
   arrow: {
+    alignItems: 'center',
+    justifyContent: 'center',
     zIndex: 2,
-    width: 24,
-    height: 24,
+    width: 40,
+    height: '100%',
+    transition: 'background-color 0.5s ease',
+    '&:not(.slick-disabled)': {
+      backgroundColor: 'rgba(0,0,0,0.05)',
+    },
+    '&:not(.slick-disabled):hover': {
+      backgroundColor: 'rgba(0,0,0,0.1)',
+    },
     '&::before': {
       fontSize: 23,
       color: theme.palette.primary.main,

@@ -0,0 +1,14 @@ 
+import {createPortal} from 'react-dom';
+import Box from '@material-ui/core/Box';
+
+const Dots = ({children}) =>
+  createPortal(
+    <Box className="slick-dots" component="ul" display="flex">
+      <Box display="flex" margin="0 auto">
+        {children}
+      </Box>
+    </Box>,
+    document.getElementById('slider-dots')
+  );
+
+export default Dots;

@@ -1,26 +1,12 @@ 
-import Box from '@material-ui/core/Box';
 import CustomArrow from './CustomArrow';
+import Dots from './Dots';
 
 const sliderSettings = {
   accessibility: true,
   dots: true,
-  appendDots: dots => (
-    <Box
-      top={0}
-      left={0}
-      p={1}
-      height={36}
-      component="ul"
-      overflow="auto"
-      display="flex"
-    >
-      <Box display="flex" margin="0 auto">
-        {dots}
-      </Box>
-    </Box>
-  ),
-  nextArrow: <CustomArrow right={16} />,
-  prevArrow: <CustomArrow left={16} />,
+  appendDots: dots => <Dots>{dots}</Dots>,
+  nextArrow: <CustomArrow right={0} />,
+  prevArrow: <CustomArrow left={0} />,
   arrows: true,
   infinite: false,
   speed: 500,

@@ -1,22 +1,21 @@ 
 import {useRef, useEffect} from 'react';
-import Slider from 'react-slick';
-import Box from '@material-ui/core/Box';
 import {makeStyles} from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
+import Slider from 'react-slick';
 import WaitingList from '../WaitingList';
+import useEventStore from '../../stores/useEventStore';
+import {Car as CarType} from '../../generated/graphql';
 import Car from '../Car';
 import AddCar from './AddCar';
-import useEventStore from '../../stores/useEventStore';
 import sliderSettings from './_SliderSettings';
-import {Car as CarType} from '../../generated/graphql';
 
 interface Props {
   toggleNewCar: () => void;
 }
 
 const CarColumns = (props: Props) => {
-  const wrapper = useRef();
-  const slider = useRef();
+  const wrapper = useRef(null);
+  const slider = useRef(null);
   const event = useEventStore(s => s.event);
   const {cars} = event || {};
   const classes = useStyles();
@@ -31,25 +30,27 @@ });
   }, [wrapper, slider]);
 
   return (
-    <Box ref={wrapper}>
-      <Slider className={classes.slider} ref={slider} {...sliderSettings}>
-        <Container maxWidth="sm" className={classes.slide}>
-          <WaitingList />
-        </Container>
-        {cars?.length > 0 &&
-          cars
-            .slice()
+    <div className={classes.container}>
+      <div className={classes.dots} id="slider-dots" />
+      <div className={classes.slider} ref={wrapper}>
+        <Slider ref={slider} {...sliderSettings}>
+          <Container maxWidth="sm" className={classes.slide}>
+            <WaitingList />
+          </Container>
+          {cars
+            ?.slice()
             .sort(sortCars)
             .map(car => (
               <Container key={car.id} maxWidth="sm" className={classes.slide}>
                 <Car car={car} {...props} />
               </Container>
             ))}
-        <Container maxWidth="sm" className={classes.slide}>
-          <AddCar {...props} />
-        </Container>
-      </Slider>
-    </Box>
+          <Container maxWidth="sm" className={classes.slide}>
+            <AddCar {...props} />
+          </Container>
+        </Slider>
+      </div>
+    </div>
   );
 };
 
@@ -57,37 +58,66 @@ const sortCars = (a: CarType, b: CarType) => {
   if (!b) return 1;
   const dateA = new Date(a.departure).getTime();
   const dateB = new Date(b.departure).getTime();
-  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
+  if (dateA === dateB)
+    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
   else return dateA - dateB;
 };
 
 const useStyles = makeStyles(theme => ({
-  slider: {
-    marginTop: theme.mixins.toolbar.minHeight,
-    padding: theme.spacing(1, 6),
+  container: {
+    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
     overflow: 'hidden',
-
-    [theme.breakpoints.down('sm')]: {
-      padding: theme.spacing(1),
-    },
-
-    '& .slick-list': {
-      overflow: 'visible',
+    position: 'relative',
+    top: theme.mixins.toolbar.minHeight,
+  },
+  dots: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 20,
+    width: '100%',
+    height: 32,
+    overflow: 'auto',
+    '& overflow': '-moz-scrollbars-none',
+    '-ms-overflow-style': 'none',
+    '&::-webkit-scrollbar': {
+      height: '0 !important',
     },
     '& .slick-dots': {
+      bottom: 0,
       '& li': {
         display: 'block',
       },
     },
+    '& .slick-dots li:first-child button:before, & .slick-dots li:last-child button:before':
+      {
+        color: theme.palette.primary.main,
+      },
+  },
+  slider: {
+    height: '100%',
+    zIndex: -20,
+    overflow: 'hidden',
+    '& > div': {
+      height: '100%',
+      padding: theme.spacing(4, 6, 0, 6),
+      [theme.breakpoints.down('sm')]: {
+        padding: theme.spacing(4, 1, 0, 1),
+      },
+      '& .slick-list': {
+        overflow: 'visible',
+      },
+      cursor: 'grab',
+    },
   },
   slide: {
-    marginTop: 24,
-    minHeight: `calc(100vh - ${
-      theme.mixins.toolbar.minHeight + theme.spacing(14) + 36
-    }px)`,
+    minHeight: '100%',
     outline: 'none',
     padding: theme.spacing(1),
     marginBottom: theme.spacing(12),
+    '& > *': {
+      cursor: 'default',
+    },
   },
 }));
 

@@ -20,7 +20,7 @@ "timeout": "Unstable connection, retry later"
     }
   },
   "languages": {
-    "fr": "French",
+    "fr": "Français",
     "en": "English"
   },
   "menu": {

@@ -21,7 +21,7 @@ }
   },
   "languages": {
     "fr": "Français",
-    "en": "Anglais"
+    "en": "English"
   },
   "menu": {
     "logout": "Se déconnecter",