channel view and preview responsiveness improvements

src/components/Hero.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { fluidRange } from 'polished'
 import { css } from '@emotion/core'
 import { Button, Header } from '@/shared/components'
-import sizes from '@/shared/theme/sizes'
 
 type HeroProps = {
   backgroundImg: string
@@ -21,7 +20,7 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
           ${fluidRange({ prop: 'fontSize', fromSize: '40px', toSize: '72px' })};
           line-height: 0.94;
         }
-        margin: 0 -${sizes.b8}px;
+        margin: 0 calc(-1 * var(--global-horizontal-padding));
       `}
     >
       <div

src/components/LayoutWithRouting.tsx

@@ -4,9 +4,8 @@ import { Router } from '@reach/router'
 
 import { GlobalStyle } from '@/shared/components'
 import { Navbar } from '@/components'
-import { HomeView, VideoView, SearchView, ChannelView, BrowseView } from '@/views'
+import { BrowseView, ChannelView, HomeView, SearchView, VideoView } from '@/views'
 import routes from '@/config/routes'
-import { sizes } from '@/shared/theme'
 
 const LayoutWithRouting: React.FC = () => (
   <>
@@ -27,7 +26,7 @@ const LayoutWithRouting: React.FC = () => (
 )
 
 const MainContainer = styled.main`
-  padding: 0 ${sizes.b8}px;
+  padding: 0 var(--global-horizontal-padding);
 `
 
 export default LayoutWithRouting

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

@@ -3,11 +3,10 @@ import styled from '@emotion/styled'
 import { colors, sizes, spacing } from '../../theme'
 
 const imageTopOverflow = '2rem'
+const containerPadding = '22px'
 
 export const OuterContainer = styled.article`
-  max-width: 200px;
-  width: 200px;
-  height: ${`calc(166px + ${imageTopOverflow})`};
+  min-height: ${`calc(166px + ${imageTopOverflow})`};
   padding-top: ${imageTopOverflow};
   :hover {
     cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
@@ -32,10 +31,14 @@ const hoverTransition = ({ animated }: InnerContainerProps) =>
 export const InnerContainer = styled.div<InnerContainerProps>`
   background-color: ${colors.gray[800]};
   color: ${colors.gray[300]};
+
+  width: calc(156px + calc(2 * ${containerPadding}));
+  padding: 0 ${containerPadding};
+  height: 100%;
+
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%;
   ${hoverTransition}
 `
 
@@ -51,9 +54,9 @@ export const Info = styled.div`
 `
 
 export const AvatarContainer = styled.div`
-  width: 156px;
+  width: 100%;
   height: 156px;
   position: relative;
-  margin: -${imageTopOverflow} auto 0;
+  margin-top: -${imageTopOverflow};
   z-index: 2;
 `

src/shared/components/GlobalStyle/GlobalStyle.tsx

@@ -1,6 +1,6 @@
 import { css, Global } from '@emotion/core'
 import emotionNormalize from 'emotion-normalize'
-import { typography, colors } from '../../theme'
+import { breakpoints, colors, sizes, typography } from '../../theme'
 import React from 'react'
 
 const globalStyles = css`
@@ -31,6 +31,15 @@ const globalStyles = css`
     font-family: ${typography.fonts.headers};
     color: ${colors.white};
   }
+
+  :root {
+    --global-horizontal-padding: ${sizes.b4}px;
+  }
+  @media screen and (min-width: ${breakpoints.medium}) {
+    :root {
+      --global-horizontal-padding: ${sizes.b8}px;
+    }
+  }
 `
 
 const GlobalStyle: React.FC = () => <Global styles={globalStyles} />

src/views/BrowseView.tsx

@@ -42,7 +42,7 @@ const StyledCategoryPicker = styled(CategoryPicker)`
   position: sticky;
   top: 0;
   padding: ${sizes.b5}px ${sizes.b8}px ${sizes.b2}px;
-  margin: 0 -${sizes.b8}px;
+  margin: 0 calc(-1 * var(--global-horizontal-padding));
   background-color: ${colors.black};
 `
 const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`

src/views/ChannelView/ChannelView.style.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
-import { Avatar } from '@/shared/components'
 import { fluidRange } from 'polished'
+import { Avatar } from '@/shared/components'
 import theme from '@/shared/theme'
 
 type ChannelHeaderProps = {
@@ -13,8 +13,8 @@ export const Header = styled.section<ChannelHeaderProps>`
   background-position: center center;
   background-repeat: no-repeat;
   height: 430px;
-  padding: 0 ${theme.sizes.b8}px;
-  margin: 0 -${theme.sizes.b8}px;
+  padding: 0 var(--global-horizontal-padding);
+  margin: 0 calc(-1 * var(--global-horizontal-padding));
 `
 export const TitleSection = styled.div`
   display: flex;
@@ -26,12 +26,28 @@ export const TitleSection = styled.div`
     align-items: center;
   }
 `
+export const TitleContainer = styled.div`
+  max-width: 100%;
+  @media screen and (min-width: ${theme.breakpoints.medium}) {
+    max-width: 60%;
+  }
+  background-color: ${theme.colors.gray[800]};
+  padding: 0 ${theme.sizes.b2}px;
+`
+
 export const Title = styled.h1`
+  ${fluidRange({ prop: 'fontSize', fromSize: '32px', toSize: '40px' })};
   font-weight: bold;
-  ${fluidRange({ prop: 'fontSize', fromSize: '34px', toSize: '40px' })};
-  max-width: 320px;
-  display: inline-block;
-  margin: 0;
+  margin: -4px 0 0;
+  line-height: 48px;
+  @media screen and (min-width: ${theme.breakpoints.medium}) {
+    line-height: 56px;
+  }
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  max-width: 100%;
 `
 
 export const VideoSection = styled.section`
@@ -39,16 +55,13 @@ export const VideoSection = styled.section`
 `
 
 export const StyledAvatar = styled(Avatar)`
-  max-width: 136px;
-  max-height: 136px;
   width: 128px;
   height: 128px;
-  margin-right: ${theme.sizes.b6}px;
-  > span {
-    font-size: ${theme.typography.sizes.h2};
-  };
+  margin-bottom: ${theme.sizes.b3}px;
+
   @media (min-width: ${theme.breakpoints.small}) {
     width: 136px;
     height: 136px;
+    margin: 0 ${theme.sizes.b6}px 0 0;
   }
 `

src/views/ChannelView/ChannelView.tsx

@@ -6,7 +6,7 @@ import { GET_CHANNEL } from '@/api/queries/channels'
 import { GetChannel, GetChannelVariables } from '@/api/queries/__generated__/GetChannel'
 import { VideoGrid } from '@/components'
 
-import { Header, StyledAvatar, Title, TitleSection, VideoSection } from './ChannelView.style'
+import { Header, StyledAvatar, Title, TitleContainer, TitleSection, VideoSection } from './ChannelView.style'
 
 const ChannelView: React.FC<RouteComponentProps> = () => {
   const { id } = useParams()
@@ -24,7 +24,9 @@ const ChannelView: React.FC<RouteComponentProps> = () => {
       <Header coverPhotoURL={data.channel.coverPhotoURL}>
         <TitleSection>
           <StyledAvatar img={data.channel.avatarPhotoURL} name={data.channel.handle} />
-          <Title>{data.channel.handle}</Title>
+          <TitleContainer>
+            <Title>{data.channel.handle}</Title>
+          </TitleContainer>
         </TitleSection>
       </Header>
       {videos.length > 0 && (