From 7d453c73d5228926cd97ec5ffb466e4e4d9fce30 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 4 Jun 2019 14:33:26 +0200
Subject: [PATCH] Flex AddressRow on header & buttons (#1270)

* Flex AddressRow on header & buttons

* Max-width, extra spacers for mult-columns

* 0.5rem adjustment to link padding
---
 packages/ui-app/src/AddressCard.tsx |  1 +
 packages/ui-app/src/AddressRow.tsx  | 28 +++++++++++-----------------
 packages/ui-app/src/CardGrid.tsx    | 26 +++++++-------------------
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/packages/ui-app/src/AddressCard.tsx b/packages/ui-app/src/AddressCard.tsx
index 895f127811..d9c35c1e42 100644
--- a/packages/ui-app/src/AddressCard.tsx
+++ b/packages/ui-app/src/AddressCard.tsx
@@ -48,6 +48,7 @@ export default styled(AddressCard)`
 
     .ui--AddressCard-exporer-link {
       display: inline-block;
+      margin-top: 0.5rem;
     }
   }
 `;
diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx
index 758af57d78..5306fa7b49 100644
--- a/packages/ui-app/src/AddressRow.tsx
+++ b/packages/ui-app/src/AddressRow.tsx
@@ -102,16 +102,14 @@ class AddressRow extends React.PureComponent<Props, State> {
       >
         <div className='ui--AddressRow-base'>
           {this.renderIcon()}
-          {this.renderButtons()}
           <div className='ui--AddressRow-details'>
-            <div className='ui--AddressRow-data'>
-              {this.renderName()}
-              {this.renderAddress()}
-              {this.renderAccountIndex()}
-            </div>
+            {this.renderName()}
+            {this.renderAddress()}
+            {this.renderAccountIndex()}
             {this.renderBalances()}
             {this.renderTags()}
           </div>
+          {this.renderButtons()}
         </div>
         {this.renderChildren()}
       </div>
@@ -456,9 +454,9 @@ export default withMulti(
     }
 
     .ui--AddressRow-buttons {
-      position: absolute;
-      right: 0.75rem;
-      top: 0.75rem;
+      flex: 0;
+      margin: -0.75rem -0.75rem 0 0;
+      white-space: nowrap;
     }
 
     .ui--AddressRow-children {
@@ -466,21 +464,18 @@ export default withMulti(
       padding-top: 1rem;
     }
 
-    .ui--AddressRow-data {
-      margin: 0;
+    .ui--AddressRow-details {
+      flex: 1;
+      margin-right: 1rem;
       padding: 0.25rem 0 0;
-      white-space: nowrap;
 
       * {
         vertical-align: middle;
       }
     }
 
-    .ui--AddressRow-details {
-      white-space: nowrap;
-    }
-
     .ui--AddressRow-icon {
+      flex: 0;
       margin-right: 1em;
     }
 
@@ -492,7 +487,6 @@ export default withMulti(
       text-overflow: ellipsis;
       text-transform: uppercase;
       white-space: normal;
-      width: 17rem;
     }
 
     .ui--AddressRow-name-input {
diff --git a/packages/ui-app/src/CardGrid.tsx b/packages/ui-app/src/CardGrid.tsx
index 772dd1a203..99fa8071b5 100644
--- a/packages/ui-app/src/CardGrid.tsx
+++ b/packages/ui-app/src/CardGrid.tsx
@@ -25,6 +25,8 @@ class CardGrid extends React.PureComponent<Props> {
         <div className='ui--CardGrid-grid'>
           {children}
           <div className='ui--CardGrid-spacer' />
+          <div className='ui--CardGrid-spacer' />
+          <div className='ui--CardGrid-spacer' />
         </div>
       </div>
     );
@@ -39,28 +41,14 @@ export default styled(CardGrid)`
     > .ui--CardGrid-spacer {
       flex: 1 1;
       margin: 0.25rem;
-      padding: 1rem 1.5rem;
+      padding: 0 1.5rem;
     }
   }
 
-  .ui--Card {
+  .ui--Card,
+  .ui--CardGrid-spacer {
     flex: 1 1;
-    min-width: 24%;
-    max-width: 24%;
-
-    @media (max-width: 2060px) {
-      min-width: 32%;
-      max-width: 32%;
-    }
-
-    @media (max-width: 1580px) {
-      min-width: 49%;
-      max-width: 49%;
-    }
-
-    @media (max-width: 1100px) {
-      min-width: 100%;
-      max-width: 100%;
-    }
+    min-width: 35rem;
+    max-width: 71rem;
   }
 `;