Fix overflow issue on mobile transaction page (#11029)

## Description 

Describe the changes or additions included in this PR.

[Before](https://explorer.sui.io/txblock/C4w5Zekb51ToBCTV9HPSWHyKFRLDNKTmMYuUPrsgBax5)
<img width="399" alt="Screenshot 2023-04-18 at 5 33 38 AM"
src="https://user-images.githubusercontent.com/126525197/232736342-34e81356-0819-4bb6-add4-7f510e4ce5f8.png">


[After](https://explorer-git-gj-explorer-txn-mobile-overflow-mysten-labs.vercel.app/txblock/C4w5Zekb51ToBCTV9HPSWHyKFRLDNKTmMYuUPrsgBax5)
<img width="391" alt="Screenshot 2023-04-18 at 5 33 19 AM"
src="https://user-images.githubusercontent.com/126525197/232736242-106d223c-5505-4690-bf61-41498bf8630b.png">

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/explorer/src/pages/transaction-result/programmable-transaction-view/Transaction.tsx

@@ -27,7 +27,7 @@ function TransactionContent({
 }) {
     return (
         <>
-            <div className="text-heading6 font-semibold text-steel-darker">
+            <div className="break-all text-heading6 font-semibold text-steel-darker">
                 {type}
             </div>
             {children && (
@@ -45,7 +45,9 @@ function ArrayArgument({
 }: TransactionProps<(SuiArgument | SuiArgument[])[] | undefined>) {
     return (
         <TransactionContent type={type}>
-            {data && <>({flattenSuiArguments(data)})</>}
+            {data && (
+                <span className="break-all">({flattenSuiArguments(data)})</span>
+            )}
         </TransactionContent>
     );
 }
@@ -65,9 +67,16 @@ function MoveCall({ type, data }: TransactionProps<MoveCallSuiTransaction>) {
                 objectId={`${movePackage}?module=${module}`}
                 label={`'${module}'`}
             />
-            , function: <span className="text-sui-dark">{func}</span>
-            {args && <>, arguments: [{flattenSuiArguments(args!)}]</>}
-            {typeArgs && <>, type_arguments: {typeArgs}</>})
+            , function: <span className="break-all text-sui-dark">{func}</span>
+            {args && (
+                <span className="break-all">
+                    , arguments: [{flattenSuiArguments(args!)}]
+                </span>
+            )}
+            {typeArgs && (
+                <span className="break-all">, type_arguments: {typeArgs}</span>
+            )}
+            )
         </TransactionContent>
     );
 }