Adjust parachain media queries (#8651)

* Adjust parachain media queries

* Columar flex

* Columar queries

* singular media query

packages/page-parachains/src/Overview/Parachain.tsx

@@ -150,12 +150,12 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
           : paraInfo.watermark && formatNumber(paraInfo.watermark)
         }
       </td>
-      <td className='number no-pad-left media--800'>
+      <td className='number no-pad-left media--900'>
         {lastBacked &&
           <a href={`#/explorer/query/${lastBacked.blockHash}`}>{formatNumber(lastBacked.blockNumber)}</a>
         }
       </td>
-      <td className='number no-pad-left media--900'>
+      <td className='number no-pad-left media--1600'>
         {lastTimeout &&
           <a href={`#/explorer/query/${lastTimeout.blockHash}`}>{formatNumber(lastTimeout.blockNumber)}</a>
         }
@@ -163,13 +163,13 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
       <td className='number no-pad-left'>
         <ParachainInfo id={id} />
       </td>
-      <td className='number media--1200'>
+      <td className='number media--1700'>
         {formatNumber(paraInfo.qHrmpI)}
       </td>
-      <td className='number no-pad-left media--1200'>
+      <td className='number no-pad-left media--1700'>
         {formatNumber(paraInfo.qHrmpE)}
       </td>
-      <td className='number together media--1000'>
+      <td className='number together media--1100'>
         <Periods
           leasePeriod={leasePeriod}
           periods={paraInfo.leases}

packages/page-parachains/src/Overview/Parachains.tsx

@@ -65,11 +65,11 @@ function Parachains ({ actionsQueue, ids, leasePeriod, scheduled }: Props): Reac
     [t('lifecycle'), 'start'],
     [],
     [t('included'), undefined, 2],
-    [t('backed'), 'no-pad-left media--800'],
-    [t('timeout'), 'no-pad-left media--900'],
+    [t('backed'), 'no-pad-left media--900'],
+    [t('timeout'), 'no-pad-left media--1600'],
     [t('chain'), 'no-pad-left'],
-    [t('in/out'), 'media--1200', 2],
-    [t('leases'), 'media--1000']
+    [t('in/out'), 'media--1700', 2],
+    [t('leases'), 'media--1100']
   ]);
 
   const scheduledIds = useMemo(

packages/react-components/src/Columar.tsx

@@ -38,46 +38,40 @@ function Columar ({ children, className = '', is60, isFull, isPadded = true }: P
 }
 
 const ColumarStyled = React.memo(styled(Columar)`
-  display: flex;
-  flex-wrap: wrap;
+  &.isPadded .ui--Column {
+    padding: 0 0.75rem;
+  }
 
-  &.is50 {
-    .ui--Column {
-      @media (min-width: 1025px) {
+  @media (min-width: 1025px) {
+    display: flex;
+    flex-wrap: wrap;
+
+    &.is50 {
+      .ui--Column {
         max-width: 50%;
         min-width: 50%;
       }
     }
-  }
 
-  &.is60 {
-    .ui--Column:first-child {
-      @media (min-width: 1025px) {
+    &.is60 {
+      .ui--Column:first-child {
         max-width: 60%;
         min-width: 60%;
       }
-    }
 
-    .ui--Column:last-child {
-      @media (min-width: 1025px) {
+      .ui--Column:last-child {
         max-width: 40%;
         min-width: 40%;
       }
     }
-  }
 
-  &.Full {
-    .ui--Column {
-      @media (min-width: 1025px) {
+    &.Full {
+      .ui--Column {
         max-width: 100%;
         min-width: 100%;
       }
     }
   }
-
-  &.isPadded .ui--Column {
-    padding: 0 0.75rem;
-  }
 `) as unknown as ColumarType;
 
 ColumarStyled.Column = React.memo(styled(Column)`
@@ -85,6 +79,7 @@ ColumarStyled.Column = React.memo(styled(Column)`
   max-width: 100%;
   flex: 1 1;
   margin: 0;
+  width: 100%;
 
   &:first-child {
     padding-left: 0;
@@ -93,11 +88,6 @@ ColumarStyled.Column = React.memo(styled(Column)`
   &:last-child {
     padding-right: 0;
   }
-
-  @media (min-width: 1025px) {
-    max-width: 50%;
-    min-width: 50%;
-  }
 `);
 
 export default ColumarStyled;