bridge_ui: nft container overflow adjustment in tvl

Change-Id: I14bde8de239479887b589d1f9fe7374df45e6648

bridge_ui/src/components/Stats/NFTStats.tsx

@@ -65,6 +65,7 @@ const useStyles = makeStyles((theme) => ({
     "& > *": {
       margin: theme.spacing(1),
     },
+    flexWrap: "wrap",
   },
   randomButton: {
     margin: "0px auto 8px",
@@ -72,11 +73,17 @@ const useStyles = makeStyles((theme) => ({
   },
   randomNftContainer: {
     minHeight: "550px",
+    maxWidth: "100%",
   },
   alignCenter: {
     margin: "0 auto",
     display: "block",
   },
+  tableContainer: {
+    flexGrow: 1,
+    width: "fit-content",
+    maxWidth: "100%",
+  },
 }));
 
 const BLACKLIST = ["D9cX654dGb4GFzqq3RY7rhZbRkQqUkfggDZdnYxqv97g"];
@@ -241,7 +248,7 @@ const NFTStats: React.FC<any> = () => {
         <CircularProgress className={classes.alignCenter} />
       ) : (
         <div className={classes.tableBox}>
-          {table}
+          <div className={classes.tableContainer}>{table}</div>
           {randomNFTContent}
         </div>
       )}

bridge_ui/src/components/Stats/index.tsx

@@ -43,6 +43,7 @@ const useStyles = makeStyles((theme) => ({
       margin: ".5rem",
     },
     marginBottom: theme.spacing(2),
+    overflow: "auto",
   },
   flexBox: {
     display: "flex",

bridge_ui/src/components/TokenSelectors/NFTViewer.tsx

@@ -186,6 +186,7 @@ const useStyles = makeStyles((theme) => ({
     position: "relative",
     height: "500px",
     width: "400px",
+    maxWidth: "100%",
     margin: `${theme.spacing(1)}px auto`,
   },
 }));