Adjust staking media sizing (#3481)

* Adjust media sizing for staking

* Adjust boundary

packages/apps/src/Content/NotFound.tsx

@@ -2,10 +2,18 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { RouteProps } from '@polkadot/apps-routing/types';
+
 import React from 'react';
 import { Redirect } from 'react-router';
 
-function NotFound (): React.ReactElement {
+interface Props extends RouteProps {
+  missingApis?: (string | string[])[];
+}
+
+function NotFound ({ basePath, missingApis = [] }: Props): React.ReactElement {
+  console.log(`Redirecting from route "${basePath}" to "explorer", missing the following APIs: ${JSON.stringify(missingApis)}`);
+
   return (
     <Redirect to='/explorer' />
   );

packages/apps/src/Content/index.tsx

@@ -47,10 +47,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
     [location, t]
   );
 
-  const missingApis = useMemo(
-    () => findMissingApis(api, needsApi),
-    [api, needsApi]
-  );
+  const missingApis = findMissingApis(api, needsApi);
 
   return (
     <div className={className}>
@@ -63,18 +60,25 @@ function Content ({ className }: Props): React.ReactElement<Props> {
         : (
           <>
             <Suspense fallback='...'>
-              {missingApis.length
-                ? <NotFound />
-                : (
-                  <ErrorBoundary trigger={name}>
+              <ErrorBoundary trigger={name}>
+                {missingApis.length
+                  ? (
+                    <NotFound
+                      basePath={`/${name}`}
+                      location={location}
+                      missingApis={missingApis}
+                      onStatusChange={queueAction}
+                    />
+                  )
+                  : (
                     <Component
                       basePath={`/${name}`}
                       location={location}
                       onStatusChange={queueAction}
                     />
-                  </ErrorBoundary>
-                )
-              }
+                  )
+                }
+              </ErrorBoundary>
             </Suspense>
             <Status />
           </>

packages/page-staking/src/Overview/Address/index.tsx

@@ -142,7 +142,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           />
         )
       }
-      <td className='number'>
+      <td className='number ui--media-1100'>
         {stakeOwn?.gtn(0) && (
           <FormatBalance value={stakeOwn} />
         )}
@@ -168,7 +168,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           />
         )}
       </td>
-      <td>
+      <td className='mini ui--media-1200'>
         <LinkExternal
           data={address}
           type={isMain ? 'validator' : 'intention'}

packages/page-staking/src/Overview/CurrentList.tsx

@@ -124,12 +124,12 @@ function CurrentList ({ favorites, hasQueries, isIntentions, next, stakingOvervi
   const headerActiveRef = useRef([
     [t('validators'), 'start', 2],
     [t('other stake')],
-    [t('own stake')],
+    [t('own stake'), 'ui--media-1100'],
     [t('commission')],
     [t('points')],
     [t('last #')],
     [],
-    []
+    [undefined, 'ui--media-1200']
   ]);
 
   const _renderRows = useCallback(

packages/page-staking/src/Overview/Summary.tsx

@@ -33,12 +33,18 @@ function Summary ({ className = '', isVisible, next, nominators, stakingOverview
           </CardSummary>
         )}
         {!!next?.length && (
-          <CardSummary label={t<string>('waiting')}>
+          <CardSummary
+            className='ui--media-1000'
+            label={t<string>('waiting')}
+          >
             {next.length}
           </CardSummary>
         )}
         {!!nominators?.length && (
-          <CardSummary label={t<string>('nominators')}>
+          <CardSummary
+            className='ui--media-1100'
+            label={t<string>('nominators')}
+          >
             {nominators.length}
           </CardSummary>
         )}

packages/page-staking/src/Targets/Summary.tsx

@@ -77,7 +77,7 @@ function Summary ({ avgStaked, lastReward, lowStaked, numNominators, numValidato
       </section>
       {avgStaked && lowStaked && (
         <CardSummary
-          className='ui--media-medium'
+          className='ui--media-1000'
           label={`${t<string>('lowest / avg staked')}`}
           progress={progressAvg}
         >