Merge pull request #1769 from Gamaranto/improve-channel-previews

Improve channel previews spacing

src/components/ChannelGallery.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import styled from '@emotion/styled'
 
 import { ChannelPreviewBase, Gallery } from '@/shared/components'
 import ChannelPreview from './ChannelPreviewWithNavigation'
@@ -19,13 +20,13 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loadin
   const displayPlaceholders = loading || !channels
 
   return (
-    <Gallery title={title} trackPadding={trackPadding} itemWidth={210}>
+    <Gallery title={title} trackPadding={trackPadding} itemWidth={220} exactWidth={true}>
       {displayPlaceholders
         ? Array.from({ length: PLACEHOLDERS_COUNT }).map((_, idx) => (
             <ChannelPreviewBase key={`channel-placeholder-${idx}`} />
           ))
         : channels!.map((channel) => (
-            <ChannelPreview
+            <StyledChannelPreview
               id={channel.id}
               name={channel.handle}
               avatarURL={channel.avatarPhotoUrl}
@@ -37,4 +38,10 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loadin
   )
 }
 
+const StyledChannelPreview = styled(ChannelPreview)`
+  + * {
+    margin-left: 16px;
+  }
+`
+
 export default ChannelGallery

src/shared/components/ChannelPreview/ChannelPreviewBase.style.tsx

@@ -6,7 +6,8 @@ const imageTopOverflow = '2rem'
 const containerPadding = '22px'
 
 export const OuterContainer = styled.article`
-  min-height: ${`calc(166px + ${imageTopOverflow})`};
+  display: flex;
+  min-height: calc(178px + ${imageTopOverflow});
   padding-top: ${imageTopOverflow};
   :hover {
     cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
@@ -34,7 +35,6 @@ export const InnerContainer = styled.div<InnerContainerProps>`
 
   width: calc(156px + calc(2 * ${containerPadding}));
   padding: 0 ${containerPadding};
-  height: 100%;
 
   display: flex;
   flex-direction: column;