Merge pull request #1104 from alleslabs/fix/pool-card

fix: pool card

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Bug fixes
 
 - [#1100](https://github.com/alleslabs/celatone-frontend/pull/1100) Fix account modules spacing
+- [#1104](https://github.com/alleslabs/celatone-frontend/pull/1104) Fix pool asset card not taking full width
 
 ## v1.8.0
 

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx

@@ -34,6 +34,7 @@ export const AssetCard = ({
       <Flex
         className="copier-wrapper"
         direction="column"
+        w="full"
         minH="100px"
         gap={2}
         p={3}

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text } from "@chakra-ui/react";
+import { Flex, Grid, Text } from "@chakra-ui/react";
 import type { Event } from "@cosmjs/stargate";
 import type { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
 
@@ -74,7 +74,7 @@ export const PoolSwap = ({
       mb={6}
       templateColumns="minmax(250px, 1fr) 24px minmax(250px, 1fr)"
     >
-      <div>
+      <Flex direction="column">
         <Text variant="body2" textColor="gray.500" fontWeight={500}>
           From
         </Text>
@@ -84,9 +84,9 @@ export const PoolSwap = ({
           assetInfo={assetInfos?.[inAsset.denom]}
           ampCopierSection={ampCopierSection}
         />
-      </div>
+      </Flex>
       <CustomIcon name="arrow-right" boxSize={4} color="primary.main" />
-      <div>
+      <Flex direction="column">
         <Text variant="body2" textColor="gray.500" fontWeight={500}>
           To
         </Text>
@@ -96,7 +96,7 @@ export const PoolSwap = ({
           assetInfo={assetInfos?.[outAsset.denom]}
           ampCopierSection={ampCopierSection}
         />
-      </div>
+      </Flex>
     </Grid>
   );
 };