From de468760d6785c3df5d8a8be092b6e8d7eb01116 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 28 Jul 2021 14:17:13 +0100
Subject: [PATCH] update layout

---
 wallet-web/components/Layout.tsx            |  2 +-
 wallet-web/components/bond/BondNodeForm.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
index 09befee3bc..e73e2b9ce3 100644
--- a/wallet-web/components/Layout.tsx
+++ b/wallet-web/components/Layout.tsx
@@ -11,7 +11,7 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
       }}
     >
       <Grid container justify="center">
-        <Grid item xs={12} md={6} lg={4}>
+        <Grid item xs={12} md={8} xl={4}>
           {children}
         </Grid>
       </Grid>
diff --git a/wallet-web/components/bond/BondNodeForm.tsx b/wallet-web/components/bond/BondNodeForm.tsx
index 5d3735e59c..c3a358a0e3 100644
--- a/wallet-web/components/bond/BondNodeForm.tsx
+++ b/wallet-web/components/bond/BondNodeForm.tsx
@@ -9,6 +9,7 @@ import {
   InputAdornment,
   Grid,
   TextField,
+  useMediaQuery,
 } from '@material-ui/core'
 import bs58 from 'bs58'
 import semver from 'semver'
@@ -81,6 +82,8 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
     getBalance()
   }, [getBalance])
 
+  const matches = useMediaQuery('(min-width:768px)')
+
   const handleCheckboxToggle = () => {
     setAdvancedShown((prevSet) => !prevSet)
   }
@@ -312,9 +315,11 @@ export default function BondNodeForm(props: TBondNodeFormProps) {
             required
             id="amount"
             name="amount"
-            label={`Amount to bond (minimum ${nativeToPrintable(
-              minimumBond.amount
-            )} ${minimumBond.denom})`}
+            label={`Amount to bond ${
+              matches
+                ? '(minimum ' + nativeToPrintable(minimumBond.amount) + ')'
+                : ''
+            }`}
             error={!validateAmount}
             helperText={
               !validateAmount