Adjust preimage columns (#8707)

* Adjust preimage columns

* Add address to column

packages/page-preimages/src/Preimages/Call.tsx

@@ -29,13 +29,16 @@ function PreimageCall ({ className = '', value }: Props): React.ReactElement<Pro
               />
             )}
             {
-              (value.proposalError && <MarkError content={value.proposalError} />) ||
-              (value.proposalWarning && <MarkWarning content={value.proposalWarning} />)
+              value.proposalError
+                ? <MarkError content={value.proposalError} />
+                : value.proposalWarning
+                  ? <MarkWarning content={value.proposalWarning} />
+                  : null
             }
           </>
         )}
       </td>
-      <td className='media--1300'>
+      <td className='address media--1300'>
         {value?.deposit && (
           <AddressMini
             balance={value.deposit.amount}

packages/page-preimages/src/Preimages/Preimage.tsx

@@ -28,11 +28,12 @@ function Preimage ({ className, value }: Props): React.ReactElement<Props> {
         {info?.bytes && formatNumber(info.bytes.length)}
       </td>
       <td className='preimage-status together media--1200'>
-        <div>{info?.status?.type}</div>
-        {info && <Free value={info} />}
-      </td>
-      <td className='number media--1400'>
-        {info && info.count !== 0 && formatNumber(info.count)}
+        {info && (
+          <>
+            <div>{info.status?.type}{info.count !== 0 && <>&nbsp;/&nbsp;{formatNumber(info.count)}</>}</div>
+            <Free value={info} />
+          </>
+        )}
       </td>
     </tr>
   );

packages/page-preimages/src/Preimages/index.tsx

@@ -28,8 +28,7 @@ function Hashes ({ className }: Props): React.ReactElement<Props> {
     [t('preimages'), 'start', 2],
     [undefined, 'media--1300'],
     [t('size'), 'media--1000'],
-    [t('status'), 'start media--1200'],
-    [t('count'), 'media--1400']
+    [t('status'), 'start media--1200']
   ]);
 
   return (