Fix vertical responsiveness of L breakpoint - Closes #170

src/components/account/account.css

@@ -92,7 +92,7 @@
 .peer {
   font-size: 16px;
   float: left;
-  margin: 50px 0px;
+  margin: 5vh 0px;  /* stylelint-disable-line */
 }
 
 @media (--medium-viewport) {

src/components/app/app.css

@@ -15,7 +15,6 @@ body {
 .bodyWrapper {
   position: absolute;
   width: 100%;
-  height: 100%;
   left: 0;
   top: 0;
   align-items: center;

src/components/app/variables.css

@@ -65,7 +65,7 @@ or "warn/action" ineastd of "red/green"
   --sidebar-width: 162px;
   --sidebar-width-xl: 192px;
   --main-box-width: 1291px;
-  --main-box-height: 788px;
+  --main-box-height: 75vh; /* stylelint-disable-line */
   --border-radius-normal: 3px;
   --m-menu-bar-height: 72px;
   --s-menu-bar-height: 62px;

src/components/box/box.css

@@ -1,9 +1,8 @@
-@import '../app/variables.css';
+@import './../app/variables.css';
 
 .wrapper {
   position: relative;
   width: 100%;
-  height: var(--main-box-height);
   display: flex;
   box-sizing: border-box;
   background: var(--color-white);
@@ -14,13 +13,10 @@
   overflow: auto;
   overflow-x: hidden;
   margin: 0px;
+  height: var(--main-box-height);
 
   & footer {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    padding: 50px 30px 20px;
+    padding: 50px 0px;
     text-align: center;
 
     & :global .subTitle {

src/components/header/header.css

@@ -11,9 +11,9 @@
 }
 
 .wrapper {
-  padding: 8px;
+  padding: 0px 8px;
   float: right;
-  margin: 50px 0px;
+  margin: 5vh 0px;  /* stylelint-disable-line */
 }
 
 .logoWrapper {

src/components/mainMenu/mainMenu.css

@@ -41,7 +41,7 @@
   box-shadow: none;
   width: 100% !important;
   border: none !important;
-  padding: 25px 10px !important;
+  padding: 20px 10px !important;
 }
 
 .navigationContainer {

src/components/send/index.js

@@ -36,7 +36,8 @@ class Send extends React.Component {
             onClick={this.setSendIsActive.bind(this, false)}>
             {t('Close')} <FontIcon value='close' />
           </span>
-          <MultiStep finalCallback={this.setSendIsActive.bind(this, false)}>
+          <MultiStep finalCallback={this.setSendIsActive.bind(this, false)}
+            className={styles.wrapper}>
             <SendWritable autoFocus={this.state.sendIsActive || window.innerWidth > 1024}/>
             <SendReadable />
             <ResultBox />

src/components/send/styles.css

@@ -64,3 +64,9 @@
     font-size: 18px;
   }
 }
+
+.wrapper {
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+}

src/components/sendReadable/send.css

@@ -4,6 +4,16 @@
   --tab-inactive-color: --color-grayscale-dark;
 }
 
+.wrapper {
+  padding: 0px 30px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  overflow-y: hidden;
+  box-sizing: border-box;
+}
+
 .fee {
   text-align: right;
   margin-top: -12px;

src/components/sendReadable/send.js

@@ -93,7 +93,7 @@ class SendReadable extends React.Component {
 
   render() {
     return (
-      <div className='boxPadding send'>
+      <div className={`${styles.wrapper} send`}>
         <div className={styles.header}>
           <header className={styles.headerWrapper}>
             <h2>{this.props.t('Confirm transfer')}</h2>
@@ -105,7 +105,7 @@ class SendReadable extends React.Component {
             <AccountVisual address={this.state.recipient.value} size={60} />
           </figure>
         </div>
-        <form onSubmit={this.send.bind(this)}>
+        <form>
           <Input label={this.props.t('Send to Address')}
             className={`recipient ${styles.disabledInput}`}
             value={this.props.recipient}
@@ -127,29 +127,30 @@ class SendReadable extends React.Component {
             theme={inputStyles}
             columns={{ xs: 6, sm: 4, md: 4 }}
           />
-          <footer>
-            <section className={grid.row} >
-              <div className={grid['col-xs-4']}>
-                <Button
-                  label={this.props.t('Back')}
-                  onClick={() => this.props.prevStep()}
-                  type='button'
-                  theme={styles}
-                />
-              </div>
-              <div className={grid['col-xs-8']}>
-                <PrimaryButton
-                  className='send-button'
-                  label={this.props.t('Send')}
-                  type='submit'
-                  theme={styles}
-                  disabled={!authStateIsValid(this.state) || this.state.loading}
-                />
-                <div className='subTitle'>{this.props.t('Transactions can’t be reversed')}</div>
-              </div>
-            </section>
-          </footer>
         </form>
+        <footer>
+          <section className={grid.row} >
+            <div className={grid['col-xs-4']}>
+              <Button
+                label={this.props.t('Back')}
+                onClick={() => this.props.prevStep()}
+                type='button'
+                theme={styles}
+              />
+            </div>
+            <div className={grid['col-xs-8']}>
+              <PrimaryButton
+                className='send-button'
+                label={this.props.t('Send')}
+                type='submit'
+                theme={styles}
+                onClick={this.send.bind(this)}
+                disabled={!authStateIsValid(this.state) || this.state.loading}
+              />
+              <div className='subTitle'>{this.props.t('Transactions can’t be reversed')}</div>
+            </div>
+          </section>
+        </footer>
       </div>
     );
   }

src/components/sendWritable/send.css

@@ -77,8 +77,13 @@ input:read-only {
   }
 }
 
-.header {
-  height: 300px;
+.sendWrapper {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 @media (--small-viewport) {

src/components/sendWritable/send.js

@@ -72,7 +72,7 @@ class SendWritable extends React.Component {
 
   render() {
     return (
-      <div className='boxPadding'>
+      <div className={`${styles.sendWrapper} boxPadding`}>
         <div className={styles.header}>
           <header className={styles.headerWrapper}>
             <h2>Transfer</h2>
@@ -103,21 +103,20 @@ class SendWritable extends React.Component {
             theme={styles}
             onChange={this.handleChange.bind(this, 'amount')} />
           <div className={styles.fee}> {this.props.t('Fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })} </div>
-
-          <footer>
-            <Button onClick={() => this.props.nextStep({
-              recipient: this.state.recipient.value,
-              amount: this.state.amount.value,
-            })}
-            disabled={(!!this.state.recipient.error ||
-                          !this.state.recipient.value ||
-                          !!this.state.amount.error ||
-                          !this.state.amount.value)}
-            className={`send-next-button ${styles.nextButton}`}
-            >{this.props.t('Next')}</Button>
-            <div className='subTitle'>{this.props.t('Confirmation in the next step.')}</div>
-          </footer>
         </form>
+        <footer>
+          <Button onClick={() => this.props.nextStep({
+            recipient: this.state.recipient.value,
+            amount: this.state.amount.value,
+          })}
+          disabled={(!!this.state.recipient.error ||
+                    !this.state.recipient.value ||
+                    !!this.state.amount.error ||
+                    !this.state.amount.value)}
+          className={`send-next-button ${styles.nextButton}`}
+          >{this.props.t('Next')}</Button>
+          <div className='subTitle'>{this.props.t('Confirmation in the next step.')}</div>
+        </footer>
       </div>
     );
   }