Warp ui--row inside Params (#727)

* Warp ui--row inside Params

* Media queries for node info

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>

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

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 {