From 2caf3eded93fb29550a4c263c0cb4417baa278e6 Mon Sep 17 00:00:00 2001
From: Vadim <vadim.sav@gmail.com>
Date: Tue, 21 Jun 2022 07:07:47 +0300
Subject: [PATCH] fix overflow issue in extensions table (#7767)

---
 packages/page-settings/src/Metadata/Extensions.tsx | 9 ++++++---
 packages/page-settings/src/Metadata/index.tsx      | 4 +---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 35decbe32d..d4b89dc18c 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -4,6 +4,7 @@
 import type { ChainInfo } from '../types';
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
 
 import { emptyLogos, extensionLogos } from '@polkadot/apps-config';
 import { Button, Dropdown, Spinner, Table } from '@polkadot/react-components';
@@ -53,7 +54,6 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
       empty={t<string>('No Upgradable extensions')}
       header={headerRef.current}
     >
-
       {extensions
         ? options.length !== 0 && (
           <>
@@ -83,9 +83,12 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
         )
         : <Spinner />
       }
-
     </Table>
   );
 }
 
-export default React.memo(Extensions);
+export default React.memo(styled(Extensions)`
+  table {
+    overflow: visible;
+  }
+`);
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index 57d4ef9ba4..a1086de063 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -16,9 +16,7 @@ export default function Metadata (): React.ReactElement {
   return (
     <>
       {!isDevelopment && (
-        <>
-          <Extensions chainInfo={chainInfo} />
-        </>
+        <Extensions chainInfo={chainInfo} />
       )}
       <NetworkSpecs chainInfo={chainInfo} />
     </>