diff --git a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js index 354de4c9..a149cf8f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js @@ -29,7 +29,7 @@ const AbsoluteWrapper = styled.aside` @media screen and (max-width: ${SCREEN_SIZE.SM}) { position: absolute; - height: calc(100% - 52px); + height: calc(100vh - 52px); z-index: 200; top: 52px; animation: ${props => (props.isOpen ? SLIDE_RIGHT : SLIDE_LEFT)} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 52a977c1..b210a910 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -2,7 +2,7 @@ import * as React from 'react'; import colors from 'config/colors'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { connect } from 'react-redux'; import { Route, withRouter } from 'react-router-dom'; @@ -76,7 +76,15 @@ const MainContent = styled.article` flex-direction: column; overflow: auto; border-top-right-radius: 4px; - + + @media screen and (max-width: ${SCREEN_SIZE.SM}){ + ${props => props.preventBgScroll && css` + position: fixed; + width: 100%; + min-height: calc(100vh - 52px); + `} + } + @media screen and (max-width: 1170px) { border-top-right-radius: 0px; } @@ -111,7 +119,7 @@ const Wallet = (props: Props) => ( {props.wallet.selectedDevice && } - +