diff --git a/ui/app/app.js b/ui/app/app.js index 1ca59e406..01a67250a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -99,7 +99,7 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { - overflowX: 'hidden', + overflow: 'hidden', position: 'relative', alignItems: 'center', }, diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 160476d58..ed569cb08 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -2,20 +2,22 @@ align-items: center; visibility: visible; background: $gallery; - height: 14.4vh; - max-height: 97px; position: relative; z-index: $header-z-index; display: flex; flex-flow: column nowrap; @media screen and (max-width: 575px) { - position: fixed; - height: 34px; + padding: 0 12px; width: 100%; box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } + + @media screen and (min-width: 576px) { + height: 14.4vh; + max-height: 97px; + } } .app-header-contents { @@ -25,13 +27,16 @@ width: 100%; height: 6.9vh; + @media screen and (max-width: 575px) { + height: 100%; + } + @media screen and (min-width: 576px) { width: 85vw; } @media screen and (min-width: 769px) { width: 80vw; - height: 6.9vh; } @media screen and (min-width: 1281px) { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index b576e5ca5..ae6ee6311 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 35px; + top: 41px; left: 0; right: 0; bottom: 0; @@ -86,7 +86,7 @@ $wallet-view-bg: $wild-sand; .sidebar-overlay { z-index: $sidebar-overlay-z-index; position: fixed; - top: 35px; + top: 41px; left: 0; right: 0; bottom: 0; @@ -142,8 +142,8 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 35px; - height: calc(100% - 34px); + margin-top: 41px; + height: calc(100% - 41px); width: 100%; overflow-y: auto; background-color: $white; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d4b77fae1..3c30c3b2a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -5,7 +5,12 @@ font-family: 'DIN OT'; @media screen and (max-width: $break-small) { - top: 33px; + width: 100%; + overflow-y: auto; + + section { + flex: 0 0 auto; + } } } @@ -19,6 +24,14 @@ display: flex; flex-flow: column nowrap; width: 498px; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + box-shadow: none; + padding: 12px; + flex: 1 0 auto; + } } /* Send Screen */ @@ -43,6 +56,11 @@ z-index: 25; padding: 4px; background-color: $white; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } } .send-screen-input-wrapper { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index a1ffa98a3..51b7cf789 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -42,10 +42,13 @@ textarea:focus { /* stylelint-disable */ #app-content { overflow-x: hidden; - min-width: 357px; height: 100%; display: flex; flex-direction: column; + + @media screen and (max-width: $break-small) { + background-color: $white; + } } /* stylelint-enable */ diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 0c5501fea..624b301d1 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -46,7 +46,7 @@ $dropdown-z-index: 30; $token-icon-z-index: 15; $container-z-index: 15; $header-z-index: 12; -$mobile-header-z-index: 19; +$mobile-header-z-index: 26; $main-container-z-index: 18; $send-card-z-index: 20; $sidebar-z-index: 26;