fix: scroll behavior on MP on mobile (#6750)

* fix: update overflow

* fix: add margin for mobile

* fix: update css to use built in styling

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -40,6 +40,7 @@ const AuthenticatedHeaderWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
+  overflow: auto;
 `
 
 const HeaderButton = styled(ThemeButton)`

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react'
 import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useHasPendingTransactions } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { BREAKPOINTS, ThemedText } from 'theme'
 
 import { ActivityTab } from './Activity'
 import NFTs from './NFTs'
@@ -25,6 +25,10 @@ const Wrapper = styled(Column)`
   height: 100%;
   gap: 12px;
 
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    margin-bottom: 48px;
+  }
+
   ${PortfolioRowWrapper} {
     &:hover {
       background: ${({ theme }) => theme.hoverDefault};