fix: break layout table decode on mobile

AstraProtocol · Jul 18, 2023 · 7db10e8 · 7db10e8
1 parent e183630
commit 7db10e8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/pages/tx/[tx].tsx b/pages/tx/[tx].tsx
@@ -10,12 +10,12 @@ import Typography from 'components/Typography'
 import { pickBy } from 'lodash'
 import React from 'react'
 import { TransactionTypeEnum } from 'utils/enum'
-import { ellipseBetweenText, isMainnet, LinkMaker } from 'utils/helper'
+import { LinkMaker, ellipseBetweenText, isMainnet } from 'utils/helper'
 import DecodeInput from 'views/transactions/DecodeInput'
+import TransactionTabs from 'views/transactions/TransactionTabs'
 import useConvertData from 'views/transactions/hook/useConvertData'
 import useInternalTransactions from 'views/transactions/hook/useInternalTransactions'
-import TransactionTabs from 'views/transactions/TransactionTabs'
-import { cosmsTransactionDetail, evmTransactionDetail, TransactionQuery } from 'views/transactions/utils'
+import { TransactionQuery, cosmsTransactionDetail, evmTransactionDetail } from 'views/transactions/utils'
 import Layout from '../../components/Layout'
 
 type Props = {
@@ -45,7 +45,7 @@ const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, c
 					]}
 				/>
 				{data ? (
-					<>
+					<div>
 						<div className="margin-top-2xl margin-bottom-md">
 							<Typography.PageTitle className={['flex flex-align-center']}>
 								{data.cosmosMsgCount ? (
@@ -72,7 +72,7 @@ const TransactionDetailPage: React.FC<Props> = ({ errorMessage, data, evmHash, c
 								logs={data?.logs}
 							/>
 						)}
-					</>
+					</div>
 				) : (
 					<h1 className="text contrast-color-70 margin-top-sm">
 						{isMainnet

diff --git a/views/transactions/DecodeInput.tsx b/views/transactions/DecodeInput.tsx
@@ -1,3 +1,4 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import * as Sentry from '@sentry/react'
 import abiDecoder from 'abi-decoder'
 import { cosmosApi } from 'api'
@@ -26,6 +27,7 @@ type DecodeInputProps = {
 }
 
 export default function DecodeInput({ dataInput, address, evmHash }: DecodeInputProps) {
+	const { isMobile } = useMobileLayout('small')
 	const router = useRouter()
 	const [verifyVisible, setVerifiVisible] = useState(false)
 
@@ -135,20 +137,25 @@ export default function DecodeInput({ dataInput, address, evmHash }: DecodeInput
 				) : (
 					<BackgroundCard classes={`margin-bottom-md`}>
 						<div
-							className="text text-xl text-bold padding-left-2xl"
+							className={clsx(
+								'text text-xl text-bold',
+								isMobile ? 'padding-left-md' : 'padding-left-2xl'
+							)}
 							style={{ marginTop: '30px', marginBottom: '22px' }}
 						>
 							INPUT
 						</div>
-						{items?.map((item, index) => (
-							<LogElement
-								onOpenVerify={onShowVerify}
-								key={item.index}
-								{...item}
-								borderTop={index !== 0}
-								showLeftBorder={false}
-							/>
-						))}
+						<div style={{ overflow: 'auto' }}>
+							{items?.map((item, index) => (
+								<LogElement
+									onOpenVerify={onShowVerify}
+									key={item.index}
+									{...item}
+									borderTop={index !== 0}
+									showLeftBorder={false}
+								/>
+							))}
+						</div>
 					</BackgroundCard>
 				)}
 			</div>