Merge pull request #3239 from LiskHQ/3238-wallet-responsiveness

Fix Wallet responsiveness in small screens - Closes #3238
LiskHQ · Dec 16, 2020 · 73372cd · 73372cd
2 parents f783112 + ae166d7
commit 73372cd
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 3 deletions.
diff --git a/src/app/variables.css b/src/app/variables.css
@@ -205,7 +205,7 @@ or "warn/action" ineastd of "red/green"
   *************************/
 }
 
-@custom-media --xLarge-viewport (min-width: 1400px);
+@custom-media --xLarge-viewport (max-width: 1600px);
 @custom-media --large-viewport (max-width: 1400px);
 @custom-media --medium-viewport (max-width: 1024px);
 @custom-media --small-viewport (max-width: 768px);

diff --git a/src/components/screens/wallet/overview/accountInfo/accountInfo.css b/src/components/screens/wallet/overview/accountInfo/accountInfo.css
@@ -19,6 +19,7 @@
 
     color: var(--color-strong-mystic);
     margin: 0 0 10px;
+    box-sizing: border-box;
   }
 
   & .info {

diff --git a/src/components/screens/wallet/overview/balanceChart/balanceChart.css b/src/components/screens/wallet/overview/balanceChart/balanceChart.css
@@ -26,6 +26,7 @@
   align-items: flex-start;
   color: var(--color-maastricht-blue);
   padding: 0 20px 10px;
+  box-sizing: border-box;
 }
 
 .discreetMode {

diff --git a/src/components/screens/wallet/overview/balanceInfo/balanceInfo.css b/src/components/screens/wallet/overview/balanceInfo/balanceInfo.css
@@ -28,6 +28,7 @@
   align-items: flex-start;
   padding: 0 20px 10px;
   color: var(--color-ink-blue);
+  box-sizing: border-box;
 }
 
 .valuesRow {

diff --git a/src/components/screens/wallet/overview/overview.css b/src/components/screens/wallet/overview/overview.css
@@ -1,14 +1,13 @@
 .wrapper {
   padding-bottom: var(--horizontal-padding-l);
   padding-top: 30px;
-  max-width: 100%;
 
   & > div:not(:nth-child(3)) {
     min-width: 320px;
   }
 }
 
-@media (--large-viewport) {
+@media (--xLarge-viewport) {
   .balanceChart {
     width: calc(100% - 640px);
     flex-basis: unset;