From 01dc10d4f3ede89973178329297ac34fc7e4a9b5 Mon Sep 17 00:00:00 2001
From: Brendan Wong <35351983+LunrEclipse@users.noreply.github.com>
Date: Thu, 22 Jun 2023 16:11:23 -0400
Subject: [PATCH] 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 | 1 +
 src/components/AccountDrawer/MiniPortfolio/index.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/AccountDrawer/AuthenticatedHeader.tsx b/src/components/AccountDrawer/AuthenticatedHeader.tsx
index 810088ac83..669d55bf5b 100644
--- a/src/components/AccountDrawer/AuthenticatedHeader.tsx
+++ b/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)`
diff --git a/src/components/AccountDrawer/MiniPortfolio/index.tsx b/src/components/AccountDrawer/MiniPortfolio/index.tsx
index 9e9d63285e..9deec216db 100644
--- a/src/components/AccountDrawer/MiniPortfolio/index.tsx
+++ b/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};