From 5c59c3f991022e0acd0e27011756bdd5ec5fa108 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 18 Feb 2019 17:34:19 +0100
Subject: [PATCH] Warp ui--row inside Params (#727)

* Warp ui--row inside Params

* Media queries for node info
---
 packages/app-explorer/src/NodeInfo/Peers.tsx |  4 ++--
 packages/ui-app/src/styles/media.css         | 24 ++++++++++++++++++++
 packages/ui-params/src/Params.css            |  4 ++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/app-explorer/src/NodeInfo/Peers.tsx b/packages/app-explorer/src/NodeInfo/Peers.tsx
index 529d4dc649..9f70a79820 100644
--- a/packages/app-explorer/src/NodeInfo/Peers.tsx
+++ b/packages/app-explorer/src/NodeInfo/Peers.tsx
@@ -44,7 +44,7 @@ class Peers extends React.PureComponent<Props> {
             <tr>
               <th className='number'>{t('index')}</th>
               <th className='roles'>{t('role')}</th>
-              <th className='peerid'>{t('peer id')}</th>
+              <th className='peerid ui--media-medium'>{t('peer id')}</th>
               <th className='number'>{t('best #')}</th>
               <th className='hash'>{t('best hash')}</th>
             </tr>
@@ -62,7 +62,7 @@ class Peers extends React.PureComponent<Props> {
       <tr key={`peer:${peer.index.toNumber()}`}>
         <td className='number'>{peer.index.toNumber()}</td>
         <td className='roles'>{peer.roles.toString().toLowerCase()}</td>
-        <td className='peerid'>{peer.peerId.toString()}</td>
+        <td className='peerid ui--media-medium'>{peer.peerId.toString()}</td>
         <td className='number'>{formatNumber(peer.bestNumber)}</td>
         <td className='hash'>{peer.bestHash.toHex()}</td>
       </tr>
diff --git a/packages/ui-app/src/styles/media.css b/packages/ui-app/src/styles/media.css
index 541e3a88fe..8c72b42980 100644
--- a/packages/ui-app/src/styles/media.css
+++ b/packages/ui-app/src/styles/media.css
@@ -18,6 +18,15 @@
   width: 0;
 }
 
+td.ui--media-large,
+td.ui--media-medium,
+td.ui--media-small,
+th.ui--media-large,
+th.ui--media-medium,
+th.ui--media-small {
+  display: none;
+}
+
 @media (min-width: 1281px) {
   .ui--flex-large {
     display: flex;
@@ -28,6 +37,11 @@
     visibility: visible;
     width: auto;
   }
+
+  td.ui--media-large,
+  th.ui--media-large {
+    display: table-cell;
+  }
 }
 
 @media (min-width: 1025px) {
@@ -40,6 +54,11 @@
     visibility: visible;
     width: auto;
   }
+
+  td.ui--media-medium,
+  th.ui--media-medium {
+    display: table-cell;
+  }
 }
 
 @media (min-width: 768px) {
@@ -52,4 +71,9 @@
     visibility: visible;
     width: auto;
   }
+
+  td.ui--media-small,
+  th.ui--media-small {
+    display: table-cell;
+  }
 }
diff --git a/packages/ui-params/src/Params.css b/packages/ui-params/src/Params.css
index 3ebc985777..4fe161feea 100644
--- a/packages/ui-params/src/Params.css
+++ b/packages/ui-params/src/Params.css
@@ -4,6 +4,10 @@
 
 .ui--Params {
   border-left: 0.25rem solid #f2f2f2;
+
+  .ui--row {
+    flex-wrap: wrap;
+  }
 }
 
 .ui--Param-Address {