Fix: wrapped label and the basic info width (#726)

* fix wrapped label and the basic info width
Magickbase · Nov 18, 2022 · 8b1988f · 8b1988f
1 parent beaa0e1
commit 8b1988f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 16 deletions.
diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx
@@ -267,16 +267,14 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
       ),
     })
 
-  return (
-    <div className={styles.container} data-account-type={account.type}>
-      {account.type === GraphQLSchema.AccountType.MetaContract ? (
-        <MetaContract {...(account.script as MetaContract['script'])} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.EthUser ? (
-        <User nonce={account.nonce} isLoading={isOverviewLoading} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.EthAddrReg ? <EthAddrReg /> : null}
-      {account.type === GraphQLSchema.AccountType.PolyjuiceContract ? (
+  const getInfoBlock = account => {
+    const { type } = account
+
+    const blockMap = {
+      [`${GraphQLSchema.AccountType.MetaContract}`]: <MetaContract {...(account.script as MetaContract['script'])} />,
+      [`${GraphQLSchema.AccountType.EthUser}`]: <User nonce={account.nonce} isLoading={isOverviewLoading} />,
+      [`${GraphQLSchema.AccountType.EthAddrReg}`]: <EthAddrReg />,
+      [`${GraphQLSchema.AccountType.PolyjuiceContract}`]: (
         <SmartContract
           deployer={deployerAddr}
           deployTxHash={account.smart_contract?.deployment_tx_hash!}
@@ -286,15 +284,23 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
           refetch={refetch}
           isLoading={isOverviewLoading}
         />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.PolyjuiceCreator ? (
+      ),
+      [`${GraphQLSchema.AccountType.PolyjuiceCreator}`]: (
         <Polyjuice script={account.script as PolyjuiceCreator['script']} scriptHash={account.script_hash} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.Udt && account.udt ? (
+      ),
+      [`${GraphQLSchema.AccountType.Udt}`]: account.udt ? (
         <SUDT udt={account.udt} script={account.script} script_hash={account.script_hash} />
-      ) : null}
-      {account.type === GraphQLSchema.AccountType.Unknown ? <UnknownAccount nonce={account.nonce} /> : null}
+      ) : null,
+      [`${GraphQLSchema.AccountType.Unknown}`]: <UnknownAccount nonce={account.nonce} />,
+    }
+    const infoBlock = blockMap[type]
+
+    return infoBlock ? <div className={`${styles['info-width']}`}>{infoBlock}</div> : null
+  }
 
+  return (
+    <div className={styles.container} data-account-type={account.type}>
+      {getInfoBlock(account)}
       <InfoList title={t('overview')} list={infoList} />
     </div>
   )

diff --git a/components/AccountOverview/styles.module.scss b/components/AccountOverview/styles.module.scss
@@ -74,3 +74,9 @@
     }
   }
 }
+
+@media screen and (min-width: 1024px) {
+  .info-width {
+    width: calc(50% - 32px);
+  }
+}
diff --git a/pages/token/[id].tsx b/pages/token/[id].tsx
@@ -267,6 +267,7 @@ const Token: React.FC<Props> = () => {
         </PageTitle>
         <div className={styles.overview}>
           <InfoList
+            className={styles['info-width']}
             title={
               <div className={styles.infoTitle}>
                 {t(`tokenInfo`)}

diff --git a/pages/token/styles.module.scss b/pages/token/styles.module.scss
@@ -83,6 +83,11 @@
       display: none;
     }
   }
+  @media screen and (min-width: 1024px) {
+    .info-width {
+      width: calc(50% - 32px);
+    }
+  }
 }
 
 .list {