From 29d233d8b6c5337b8ba2f7f3377f05051e8237b3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 26 Aug 2024 18:17:30 +0700
Subject: [PATCH] fix: pool card

---
 CHANGELOG.md                                           |  1 +
 .../tables/pool-txs/messages/components/AssetCard.tsx  |  1 +
 .../pool-txs/messages/swap/components/PoolSwap.tsx     | 10 +++++-----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2df80960..18d1624fe 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
index e2e74d4e4..470b542ec 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
+++ b/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}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index e88013562..9dfd4e066 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/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>
   );
 };