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

* fix: update overflow

* fix: add margin for mobile

* fix: update css to use built in styling
This commit is contained in:
Brendan Wong 2023-06-22 16:11:23 -04:00 committed by GitHub
parent fb3abf275e
commit 01dc10d4f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 1 deletions

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

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