Fix weird carousel animation (#4217)

* fix

* unrelated adjustments

packages/atlas/src/components/LimitedWidthContainer/LimitedWidthContainer.tsx

@@ -2,12 +2,13 @@ import styled from '@emotion/styled'
 
 import { sizes } from '@/styles'
 
-type LimitedWidthContainerProps = { big?: boolean; noBottomPadding?: boolean }
+type LimitedWidthContainerProps = { big?: boolean; noBottomPadding?: boolean; fullWidth?: boolean }
 
 export const LimitedWidthContainer = styled.div<LimitedWidthContainerProps>`
   --max-inner-width: calc(${({ big }) => (big ? '2284' : '1440')}px - calc(2 * var(--size-global-horizontal-padding)));
 
   max-width: var(--max-inner-width);
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'unset')};
   position: relative;
   margin: 0 auto;
   padding-bottom: ${({ noBottomPadding }) => (noBottomPadding ? 0 : sizes(16))};

packages/atlas/src/components/_nft/NftTile/NftTileDetails.styles.ts

@@ -47,13 +47,13 @@ const containerHoverStyles = ({ loading, shouldHover = true }: ContentProps) =>
   }
 }
 
-const tileSizeVariants = ({ tileSize }: ContentProps) => `
+const tileSizeVariants = ({ tileSize }: ContentProps) => css`
   padding: ${sizes(tileSize === 'medium' ? 6 : 4)};
 
   ${StyledAvatarGroup} {
     margin-bottom: ${sizes(tileSize === 'medium' ? 4 : 3)};
   }
-  
+
   ${Details} {
     margin-top: ${sizes(tileSize === 'medium' ? 4 : 3)};
   }
@@ -64,7 +64,7 @@ export const Content = styled(Link, { shouldForwardProp: isContentPropValid })<C
   display: block;
   text-decoration: none;
   background-color: ${cVar('colorBackgroundMuted')};
-  transition: ${cVar('animationTransitionFast')};
+  transition: background-color ${cVar('animationTransitionFast')};
 
   ${containerHoverStyles};
   ${tileSizeVariants};

packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts

@@ -134,9 +134,9 @@ export const PlaylistOverlay = styled.div`
   width: 50%;
 `
 
-export const VideoThumbnailContainer = styled(Link, {
-  shouldForwardProp: (prop) => !(prop === 'clickable' || prop === 'activeDisabled' || prop === 'isPlaylist'),
-})<VideoThumbnailContainerProps>`
+const isPropValid = (prop: string) => !(prop === 'clickable' || prop === 'activeDisabled' || prop === 'isPlaylist')
+
+export const VideoThumbnailContainer = styled(Link, { shouldForwardProp: isPropValid })<VideoThumbnailContainerProps>`
   min-width: 166px;
   display: block;
   position: relative;

packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 
-import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
 import { cVar, media, sizes } from '@/styles'
 
 export const MarketplaceWrapper = styled.div`
@@ -28,7 +27,3 @@ export const TableFullWitdhtWrapper = styled(FullWidthWrapper)`
     padding: ${sizes(16)} var(--size-global-horizontal-padding);
   }
 `
-
-export const AllNftLimitedWidthContainer = styled(LimitedWidthContainer)`
-  width: 100%;
-`

packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx

@@ -8,12 +8,7 @@ import { TopSellingChannelsTable } from '@/components/TopSellingChannelsTable'
 import { useHeadTags } from '@/hooks/useHeadTags'
 
 import { FeaturedNftsSection } from './FeaturedNftsSection/FeaturedNftsSection'
-import {
-  AllNftLimitedWidthContainer,
-  FullWidthWrapper,
-  MarketplaceWrapper,
-  TableFullWitdhtWrapper,
-} from './MarketplaceView.styles'
+import { FullWidthWrapper, MarketplaceWrapper, TableFullWitdhtWrapper } from './MarketplaceView.styles'
 
 export const MarketplaceView: FC = () => {
   const headTags = useHeadTags('Marketplace')
@@ -25,7 +20,7 @@ export const MarketplaceView: FC = () => {
       <FullWidthWrapper>
         <MarketplaceCarousel type="nft" nfts={nfts} isLoading={loading} />
       </FullWidthWrapper>
-      <LimitedWidthContainer big noBottomPadding>
+      <LimitedWidthContainer big noBottomPadding fullWidth>
         <FeaturedNftsSection />
       </LimitedWidthContainer>
       <TableFullWitdhtWrapper>
@@ -33,9 +28,9 @@ export const MarketplaceView: FC = () => {
           <TopSellingChannelsTable />
         </LimitedWidthContainer>
       </TableFullWitdhtWrapper>
-      <AllNftLimitedWidthContainer big noBottomPadding>
+      <LimitedWidthContainer big noBottomPadding fullWidth>
         <AllNftSection />
-      </AllNftLimitedWidthContainer>
+      </LimitedWidthContainer>
     </MarketplaceWrapper>
   )
 }