fix(components): fix tx msg detail alignment in mobile

CHANGELOG.md

@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1126](https://github.com/alleslabs/celatone-frontend/pull/1126) Fix tx message detail alignment in small screen
 - [#1119](https://github.com/alleslabs/celatone-frontend/pull/1119) Fix move verification bug bash
 - [#1115](https://github.com/alleslabs/celatone-frontend/pull/1115) Fix move reverify button
 - [#1108](https://github.com/alleslabs/celatone-frontend/pull/1108) Fix example dev config to initialocal

src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx

@@ -52,7 +52,7 @@ export const TxMsgExpand = ({
 
       msgIcon = "upload";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Upload Wasm{" "}
           {log && (
             <>
@@ -76,7 +76,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgInstantiateContract":
       msgIcon = "instantiate";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Instantiate{" "}
           {log && (
             <ExplorerLink
@@ -104,7 +104,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgInstantiateContract2":
       msgIcon = "instantiate";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Instantiate2{" "}
           {log && (
             <ExplorerLink
@@ -132,7 +132,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgExecuteContract":
       msgIcon = "execute";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Execute{" "}
           <span style={{ fontWeight: 700 }}>
             {Object.keys(body.msg as Record<string, unknown>)[0]}
@@ -151,7 +151,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgMigrateContract":
       msgIcon = "migrate";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Migrate{" "}
           <ExplorerLink
             type="contract_address"
@@ -174,7 +174,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgUpdateAdmin":
       msgIcon = "admin-edit";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Update admin on{" "}
           <ExplorerLink
             type="contract_address"
@@ -197,7 +197,7 @@ export const TxMsgExpand = ({
     case "/cosmwasm.wasm.v1.MsgClearAdmin":
       msgIcon = "admin-clear";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Clear admin on{" "}
           <ExplorerLink
             type="contract_address"
@@ -225,7 +225,7 @@ export const TxMsgExpand = ({
             : formatTokenWithValue(singleToken);
         msgIcon = "send";
         content = (
-          <Flex gap={1}>
+          <Flex gap={1} display="inline">
             Send {assetText} to{" "}
             <ExplorerLink
               type={getAddressType(toAddress)}
@@ -242,7 +242,7 @@ export const TxMsgExpand = ({
     case "/cosmos.gov.v1.MsgSubmitProposal":
       msgIcon = "submit-proposal";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Submit Proposal {(body.isExpedited as boolean) && " Expedited "}
           {log && (
             <>
@@ -264,7 +264,7 @@ export const TxMsgExpand = ({
     case "/cosmos.gov.v1beta1.MsgVote":
       msgIcon = "vote";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Vote{" "}
           <span style={{ fontWeight: 700 }}>
             {voteOption[body.option as VoteOption]}
@@ -283,7 +283,7 @@ export const TxMsgExpand = ({
     case "/cosmos.staking.v1beta1.MsgDelegate":
       msgIcon = "delegate";
       content = (
-        <Flex gap={1}>
+        <Flex gap={1} display="inline">
           Delegate by{" "}
           <ExplorerLink
             type={getAddressType(body.delegatorAddress as string)}