fix: make carousel responsive (#5300)

* fix: make carousel responsive

* remove padding from CarouselItemIcon

src/nft/components/explore/Carousel.tsx

@@ -8,16 +8,11 @@ import styled, { css } from 'styled-components/macro'
 const MAX_CARD_WIDTH = 530
 
 const carouselHeightStyle = css`
-  height: 315px;
-
-  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
   height: 296px;
-  }
-`
 
-const carouselItemStyle = css`
+  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-  padding-top: 3px;
+    height: 316px;
-  padding-bottom: 32px;
+  }
 `
 
 const CarouselContainer = styled.div`
@@ -37,36 +32,31 @@ const CarouselCardContainer = styled.div`
 
 const CarouselItemCard = styled(a.div)`
   ${carouselHeightStyle}
-  ${carouselItemStyle}
 
   display: flex;
   justify-content: center;
-  padding: 3px 32px 32px 32px;
+  padding: 4px 12px 32px;
-
   position: absolute;
   will-change: transform;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
+    padding: 4px 32px 32px;
+  }
 `
 
 const CarouselItemIcon = styled.div`
   ${carouselHeightStyle}
-  ${carouselItemStyle}
-
-  display: flex;
   align-items: center;
-  padding-left: 8px;
-  padding-right: 8px;
-  cursor: pointer;
-  user-select: none;
-
   color: ${({ theme }) => theme.textPrimary};
-
+  cursor: pointer;
+  display: none;
+  user-select: none;
+  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    display: flex;
+  }
   :hover {
     opacity: ${({ theme }) => theme.opacity.hover};
   }
-
-  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    display: none;
-  }
 `
 
 interface CarouselProps {

src/nft/components/explore/CarouselCard.tsx

@@ -11,12 +11,15 @@ import { ThemedText } from 'theme'
 const CarouselCardContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
   background-color: ${({ theme }) => theme.backgroundSurface};
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   border-radius: 20px;
+  gap: 8px;
   overflow: hidden;
   height: 100%;
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
+    gap: 20px;
+  }
 `
 const CarouselCardBorder = styled.div`
   width: 100%;
@@ -26,7 +29,7 @@ const CarouselCardBorder = styled.div`
   border: 2px solid transparent;
   transition-property: border-color;
   transition-duration: ${({ theme }) => theme.transition.duration.fast};
-  transition-timing: ${({ theme }) => theme.transition.timing.inOut};
+  transition-timing-function: ${({ theme }) => theme.transition.timing.inOut};
 
   :hover {
     border: 2px solid ${({ theme }) => theme.backgroundOutline};
@@ -45,7 +48,7 @@ const CarouselCardBorder = styled.div`
     box-shadow: ${({ theme }) => theme.deepShadow};
     transition-property: opacity;
     transition-duration: ${({ theme }) => theme.transition.duration.fast};
-    transition-timing: ${({ theme }) => theme.transition.timing.inOut};
+    transition-timing-function: ${({ theme }) => theme.transition.timing.inOut};
   }
 
   :hover::after {
@@ -90,8 +93,11 @@ const CardHeaderRow = styled.div`
   position: relative;
   z-index: 1;
   display: flex;
-  gap: 12px;
+  gap: 8px;
   align-items: center;
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) {
+    gap: 12px;
+  }
 `
 
 const CardNameRow = styled.div`
@@ -155,28 +161,29 @@ const LoadingCollectionImage = styled.div`
 const CardBottomContainer = styled.div`
   display: grid;
   grid-template-columns: auto auto auto;
-  row-gap: 16px;
+  row-gap: 8px;
   column-gap: 20px;
   padding-right: 28px;
   padding-left: 28px;
   padding-bottom: 20px;
   justify-content: space-between;
 
-  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
+  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
-    row-gap: 12px;
+    row-gap: 16px;
   }
 `
 
 const HeaderRow = styled.div`
   color: ${({ theme }) => theme.userThemeColor};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  row-gap: 8px;
+
+  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
     font-size: 16px;
     line-height: 24px;
-  font-weight: 500;
-
-  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
     row-gap: 12px;
-    font-size: 14px;
-    line-height: 20px;
   }
 `