Adjust Track Padding and Add Margin

src/components/VideoGallery.tsx

@@ -15,7 +15,7 @@ type VideoGalleryProps = {
 
 const PLACEHOLDERS_COUNT = 12
 const CAROUSEL_ARROW_HEIGHT = 48
-const trackPadding = `${sizes.b2}px 0 0 0`
+const trackPadding = `${sizes.b2}px 0 0 ${sizes.b2}px`
 
 // This is needed since Gliderjs and the Grid have different resizing policies
 const breakpoints = breakpointsOfGrid({
@@ -27,6 +27,7 @@ const breakpoints = breakpointsOfGrid({
   breakpoint,
   settings: {
     slidesToShow: idx + 1,
+    slidesToScroll: idx + 1,
   },
 }))
 
@@ -40,7 +41,7 @@ const VideoGallery: React.FC<VideoGalleryProps> = ({ title, videos, loading }) =
     if (!imgHeight) {
       return
     }
-    const topPx = (imgHeight - CAROUSEL_ARROW_HEIGHT) / 2 + sizes.b2
+    const topPx = (imgHeight - CAROUSEL_ARROW_HEIGHT) / 2
     return css`
       top: ${topPx}px;
     `

src/shared/components/Carousel/Carousel.style.ts

@@ -5,12 +5,13 @@ export const Container = styled.div`
   position: relative;
 `
 
-export const BackgroundGradient = styled.div<{ direction: 'prev' | 'next' }>`
+export const BackgroundGradient = styled.div<{ direction: 'prev' | 'next'; margin: string }>`
   position: absolute;
   top: 0;
   left: ${(props) => (props.direction === 'prev' ? 0 : 'auto')};
   right: ${(props) => (props.direction === 'next' ? 0 : 'auto')};
   bottom: 0;
+  margin: ${(props) => props.margin};
   width: 10%;
   z-index: 1;
   background-image: linear-gradient(
@@ -45,10 +46,12 @@ export const Arrow = styled(Button)`
   }
 `
 
-export const GliderContainer = styled.div`
+export const GliderContainer = styled.div<{ trackPadding: string; margin: string }>`
   scrollbar-width: none;
+  padding: ${(props) => props.trackPadding};
+  margin: ${(props) => props.margin};
 `
-export const Track = styled.div<{ trackPadding: string }>`
+
+export const Track = styled.div`
   align-items: flex-start;
-  padding: ${(props) => props.trackPadding};
 `

src/shared/components/Carousel/Carousel.tsx

@@ -11,6 +11,15 @@ type CarouselProps = {
   arrowCss?: SerializedStyles
 } & GliderProps
 
+const trackPaddingToMargin = (padding: string) =>
+  padding
+    .split(' ')
+    .map((p) => {
+      const isZero = parseFloat(p) === 0
+      return !isZero ? `-${p}` : p
+    })
+    .join(' ')
+
 const Carousel: React.FC<CarouselProps> = ({
   children,
   trackPadding = '0',
@@ -28,15 +37,17 @@ const Carousel: React.FC<CarouselProps> = ({
     arrows: { prev: prevArrowRef.current, next: nextArrowRef.current },
     ...gliderOptions,
   })
+
+  const margin = trackPaddingToMargin(trackPadding)
   return (
     <Container {...getContainerProps({ className })}>
       <Arrow {...getPrevArrowProps()} icon="chevron-left" ref={prevArrowRef} css={arrowCss} />
-      <BackgroundGradient direction="prev" />
-      <GliderContainer {...getGliderProps()} ref={ref}>
-        <Track {...getTrackProps({ trackPadding })}>{children}</Track>
+      <BackgroundGradient direction="prev" margin={margin} />
+      <GliderContainer {...getGliderProps()} trackPadding={trackPadding} margin={margin} ref={ref}>
+        <Track {...getTrackProps()}>{children}</Track>
       </GliderContainer>
       <Arrow {...getNextArrowProps()} icon="chevron-right" ref={nextArrowRef} css={arrowCss} />
-      <BackgroundGradient direction="next" />
+      <BackgroundGradient direction="next" margin={margin} />
     </Container>
   )
 }