account actions layout (#1094)

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>

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%;
+  }
+}