fix channel preview spacing

packages/app/src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -32,6 +32,12 @@ const ChannelPreview: React.FC<ChannelPreviewProps> = ({ name, avatarURL, views,
 const NameHeader = styled.h2`
   margin: 0;
   font-size: ${typography.sizes.h6};
+  line-height: 1.25;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 `
 
 const MetaSpan = styled.span`

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core'
 import styled from '@emotion/styled'
-import { colors, spacing } from '../../theme'
+import { colors, sizes, spacing } from '../../theme'
 
 const imageTopOverflow = '2rem'
 
@@ -30,6 +30,7 @@ export const InnerContainer = styled.div<InnerContainerProps>`
   color: ${colors.gray[300]};
   display: flex;
   flex-direction: column;
+  align-items: center;
   height: 100%;
   ${hoverTransition}
 `
@@ -40,7 +41,9 @@ export const Info = styled.div`
   align-items: center;
   text-align: center;
 
-  margin: 12px auto 10px;
+  margin-top: ${sizes.b3}px;
+  padding: 0 ${sizes.b1}px;
+  max-width: 100%;
 `
 
 export const AvatarContainer = styled.div`

packages/app/src/shared/theme/index.ts

@@ -5,5 +5,5 @@ import sizes from './sizes'
 import breakpoints from './breakpoints'
 import * as fragments from './fragments'
 
-export { typography, breakpoints, spacing, colors, fragments }
+export { typography, breakpoints, spacing, sizes, colors, fragments }
 export default { typography, breakpoints, spacing, sizes, colors, fragments }