Explorer extrinsics with fixed table (#2492)

packages/page-explorer/src/BlockInfo/Extrinsic.tsx

@@ -46,7 +46,7 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
       className={className}
       key={`extrinsic:${index}`}
     >
-      <td className='top'>
+      <td colSpan={2} className='top'>
         <Expander
           summary={`${section}.${method}`}
           summaryMeta={meta}
@@ -55,14 +55,12 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
             className='details'
             mortality={
               era
-                ? blockNumber
-                  ? t('mortal, valid from #{{startAt}} to #{{endsAt}}', {
-                    replace: {
-                      endsAt: formatNumber(era[1]),
-                      startAt: formatNumber(era[0])
-                    }
-                  })
-                  : t('mortal')
+                ? t('mortal, valid from #{{startAt}} to #{{endsAt}}', {
+                  replace: {
+                    endsAt: formatNumber(era[1]),
+                    startAt: formatNumber(era[0])
+                  }
+                })
                 : t('immortal')
             }
             tip={value.tip?.toBn()}
@@ -70,10 +68,15 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
             withHash
           />
         </Expander>
-        {value.isSigned
-          ? <LinkExternal data={value.hash.toHex()} type='extrinsic' />
-          : null
-        }
+      </td>
+      <td colSpan={2} className='top'>
+        {thisEvents.map((event, index) =>
+          <Event
+            className='explorer--BlockByHash-event'
+            key={`event:${index}`}
+            value={event}
+          />
+        )}
       </td>
       <td className='top'>
         {value.isSigned
@@ -83,20 +86,12 @@ function ExtrinsicDisplay ({ blockNumber, className, events, index, value }: Pro
               <div className='explorer--BlockByHash-nonce'>
                 {t('index')} {formatNumber(value.nonce)}
               </div>
+              <LinkExternal data={value.hash.toHex()} type='extrinsic' />
             </>
           )
           : <div className='explorer--BlockByHash-unsigned'>{t('not signed')}</div>
         }
       </td>
-      <td className='all top'>
-        {thisEvents.map((event, index) =>
-          <Event
-            className='explorer--BlockByHash-event'
-            key={`event:${index}`}
-            value={event}
-          />
-        )}
-      </td>
     </tr>
   );
 }

packages/page-explorer/src/BlockInfo/Extrinsics.tsx

@@ -22,11 +22,11 @@ function Extrinsics ({ className, blockNumber, events, label, value }: Props): R
   const { t } = useTranslation();
 
   return (
-    <Table className={className}>
+    <Table className={className} isFixed>
       <Table.Head>
-        <th className='start'><h1>{label || t('extrinsics')}</h1></th>
+        <th colSpan={2} className='start'><h1>{label || t('extrinsics')}</h1></th>
+        <th colSpan={2} className='start'>{t('events')}</th>
         <th className='address'>{t('signer')}</th>
-        <th className='start'>{t('events')}</th>
       </Table.Head>
       <Table.Body empty={t('No pending extrinsics are in the queue')}>
         {value?.map((extrinsic, index): React.ReactNode =>

packages/react-components/src/Expander.tsx

@@ -73,18 +73,23 @@ function Expander ({ children, className, isOpen, summary, summaryMeta, withDot,
         )}
       </div>
       {hasContent && (isExpanded || withHidden) && (
-        <div className='ui--Expander-contents'>{children}</div>
+        <div className='ui--Expander-content'>{children}</div>
       )}
     </div>
   );
 }
 
 export default React.memo(styled(Expander)`
-  &:not(.isExpanded) .ui--Expander-contents {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+
+  &:not(.isExpanded) .ui--Expander-content {
     display: none;
   }
 
-  &.isExpanded .ui--Expander-contents {
+  &.isExpanded .ui--Expander-content {
     margin-top: 0.5rem;
   }
 
@@ -93,15 +98,14 @@ export default React.memo(styled(Expander)`
   }
 
   .ui--Expander-summary {
-    display: block;
     margin: 0;
     min-width: 12rem;
     overflow: hidden;
-    white-space: nowrap;
 
     > div {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     i.icon {

packages/react-components/src/Table.tsx

@@ -76,6 +76,8 @@ function Table ({ children, className, isFixed }: TableProps): React.ReactElemen
 
 const Memo = React.memo(styled(Table)`
   margin-bottom: 1.5rem;
+  max-width: 100%;
+  width: 100%;
 
   &.isFixed table {
     table-layout: fixed;
@@ -83,11 +85,12 @@ const Memo = React.memo(styled(Table)`
 
   table {
     border-spacing: 0;
+    max-width: 100%;
     overflow: hidden;
     width: 100%;
 
     thead tr {
-      background: #f5f5f5;
+      background: transparent;
       text-transform: lowercase;
 
       &.filter th {
@@ -146,6 +149,7 @@ const Memo = React.memo(styled(Table)`
     }
 
     tr {
+      max-width: 100%;
       width: 100%;
 
       &.isHighlight td {