refactor(874): style fixes (#314)

src/features/MatchPage/styled.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
 import { devices } from 'config/devices'
 
 export const MainWrapper = styled.div`
-  margin: 63px 0px 0 16px;
+  margin: 63px 0px 0 22px;
   display: flex;
 
   @media ${devices.laptop} {

src/features/MatchSidePlaylists/styled.tsx

@@ -4,8 +4,8 @@ import { customScrollbar } from 'features/Common'
 import { buttonStyles } from 'features/MatchPopup/components/PlaylistButton'
 
 export const Wrapper = styled.div`
-  margin-top: 42px; 
-  max-height: 86vh;
+  margin-top: 42px;
+  max-height: calc(100vh - 170px);
   overflow-y: scroll;
   ${customScrollbar}
 `
@@ -13,7 +13,7 @@ export const Wrapper = styled.div`
 export const Container = styled.div`
   width: 288px;
   margin-left: 14px;
-  margin-right: 14px;
+  margin-right: 10px;
 `
 
 export const DropdownWrapper = styled.div`
@@ -28,7 +28,7 @@ type ButtonProps = {
 
 export const Button = styled.button<ButtonProps>`
   ${buttonStyles}
-  
+
   min-height: 50px;
   outline: none;
 

src/features/ProfileHeader/styled.tsx

@@ -6,7 +6,7 @@ export const HeaderStyled = styled.header`
   display: flex;
   justify-content: space-between;
   height: 64px;
-  padding: 16px 29px 0 16px;
+  padding: 16px 29px 0 22px;
   margin-bottom: 30px;
 
   @media ${devices.laptop} {