From 2c9235e19f8a9605c5eca2147cf797f8ed4d1973 Mon Sep 17 00:00:00 2001
From: kwingram25 <kwingram25@gmail.com>
Date: Tue, 7 May 2019 09:59:49 +0200
Subject: [PATCH] account actions layout (#1094)

---
 packages/app-staking/src/Account/index.tsx | 12 ++--
 packages/app-staking/src/index.css         | 84 +++++++++++++++++++---
 2 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/packages/app-staking/src/Account/index.tsx b/packages/app-staking/src/Account/index.tsx
index db6bce91a9..4b2a3a51e6 100644
--- a/packages/app-staking/src/Account/index.tsx
+++ b/packages/app-staking/src/Account/index.tsx
@@ -86,11 +86,13 @@ class Account extends React.PureComponent<Props, State> {
         >
           <div className='staking--Account-expand'>
             {this.renderButtons()}
-            {this.renderControllerId()}
-            {this.renderStashId()}
-            {this.renderSessionId()}
-            {this.renderNominee()}
-            {this.renderNominators()}
+            <div className='staking--Account-links'>
+              {this.renderControllerId()}
+              {this.renderStashId()}
+              {this.renderSessionId()}
+              {this.renderNominee()}
+              {this.renderNominators()}
+            </div>
           </div>
         </AddressSummary>
       </article>
diff --git a/packages/app-staking/src/index.css b/packages/app-staking/src/index.css
index 5183b6f269..fe5a8a0028 100644
--- a/packages/app-staking/src/index.css
+++ b/packages/app-staking/src/index.css
@@ -19,16 +19,6 @@
   .ui--AddressMini {
     display: block;
   }
-
-  .ui--AddressSummary {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-
-    .ui--AddressSummary-base, .ui--AddressSummary-children {
-      min-width: 0;
-    }
-  }
 }
 
 .ui--Nominators {
@@ -42,6 +32,12 @@
   text-align: right;
 }
 
+.staking--Account-links {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
 .staking--Account-details {
   display: inline-block;
   text-align: left;
@@ -119,3 +115,71 @@
     margin: 0 2.25rem -0.5rem 0;
   }
 }
+
+@media (min-width: 1281px) {
+  .ui--AddressSummary {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+
+    .ui--AddressSummary-base, .ui--AddressSummary-children {
+      min-width: 0;
+    }
+  }
+}
+
+@media (max-width: 1280px) {
+  .staking--Account {
+    min-width: 31%;
+
+    .ui--AddressMini {
+      display: block;
+    }
+
+    .ui--AddressSummary {
+      display: block;
+
+      .ui--AddressSummary-base, .ui--AddressSummary-children {
+        min-width: 0;
+        display: block;
+      }
+
+      .ui--AddressSummary-base {
+        min-height: 16rem;
+      }
+
+      .ui--AddressSummary-children {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .staking--Account-expand {
+    min-width: auto;
+  }
+
+  .staking--Account-links {
+    max-width: 12rem;
+  }
+}
+
+@media (max-width: 1020px) {
+  .staking--Account {
+    min-width: 48%;
+  }
+}
+
+@media (max-width: 860px) {
+  .staking--Account {
+    min-width: 48%;
+  }
+}
+
+@media (max-width: 620px) {
+  .staking--Account {
+    min-width: 100%;
+  }
+}