From 520c5ccb06dc95a9cf8b57a549623f6c5fc66779 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 21 Dec 2023 15:00:21 +0700
Subject: [PATCH 1/3] fix(components): fix contract card and states ui

---
 CHANGELOG.md                                         |  1 +
 .../table/contracts/ContractsTableMobileCard.tsx     | 12 +++++++++---
 .../contract-details/components/ContractTop.tsx      |  1 +
 .../components/contract-states/StateLoader.tsx       |  5 ++++-
 src/lib/pages/upload/completed.tsx                   |  4 +---
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 247a027c9..c22574f60 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,6 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#692](https://github.com/alleslabs/celatone-frontend/pull/692) Fix ui styling for contract card and states
 - [#690](https://github.com/alleslabs/celatone-frontend/pull/690) Fix query msg regex for Sylvia contract
 - [#689](https://github.com/alleslabs/celatone-frontend/pull/689) Fix execute msg regex for Sylvia contract
 - [#685](https://github.com/alleslabs/celatone-frontend/pull/685) Disable save account in mobile
diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
index 0bfaa3bc9..d6f239a27 100644
--- a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
+++ b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -13,7 +13,6 @@ import { RemarkOperation } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { ContractInstantiatorCell } from "./ContractInstantiatorCell";
-import { ContractNameCell } from "./ContractNameCell";
 
 interface ContractsTableMobileCardProps {
   contractInfo: ContractInfo;
@@ -59,10 +58,17 @@ export const ContractsTableMobileCard = ({
       </Flex>
     }
     middleContent={
-      <Flex gap={3} direction="column">
+      <Flex gap={3} direction="column" maxW="full">
         <Flex direction="column">
           <MobileLabel label="Contract Name" />
-          <ContractNameCell contractLocalInfo={contractInfo} isReadOnly />
+          <Text
+            variant="body2"
+            maxW="full"
+            color="text.main"
+            wordBreak="break-all"
+          >
+            {contractInfo.name || contractInfo.label}
+          </Text>
         </Flex>
         <Flex direction="column">
           <InstantiatorRemark remark={contractInfo.remark} />
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index b4acae030..34881c3ec 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -156,6 +156,7 @@ export const ContractTop = ({
               ml={{ base: 1, md: 0 }}
               variant={{ base: "h6", md: "h5" }}
               className={!isMobile ? "ellipsis" : ""}
+              wordBreak="break-word"
             >
               {displayName}
             </Heading>
diff --git a/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx b/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx
index a87dd99ae..636564f9c 100644
--- a/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx
+++ b/src/lib/pages/contract-details/components/contract-states/StateLoader.tsx
@@ -26,8 +26,9 @@ export const StateLoader = ({
       borderRadius={8}
       bgColor="gray.900"
       p={3}
-      alignItems="center"
+      alignItems={{ base: "flex-start", md: "center" }}
       justifyContent="space-between"
+      direction={{ base: "column", md: "row" }}
     >
       {isLoading ? (
         <Flex gap={4} alignItems="center">
@@ -59,6 +60,8 @@ export const StateLoader = ({
       )}
       <Button
         size="sm"
+        mt={{ base: 3, md: 0 }}
+        w={{ base: "full", md: "auto" }}
         variant="outline-primary"
         disabled={isLoading}
         onClick={onDownload}
diff --git a/src/lib/pages/upload/completed.tsx b/src/lib/pages/upload/completed.tsx
index bcd4f59c0..c63cbd8ff 100644
--- a/src/lib/pages/upload/completed.tsx
+++ b/src/lib/pages/upload/completed.tsx
@@ -106,9 +106,7 @@ export const UploadComplete = observer(({ txResult }: UploadCompleteProps) => {
         </Flex>
       )}
       <Button
-        rightIcon={
-          <CustomIcon name="chevron-right" boxSize={4} color="text.dark" />
-        }
+        rightIcon={<CustomIcon name="chevron-right" boxSize={4} />}
         w="full"
         mt={attached ? 8 : 0}
         mb={4}

From 5618acc096633bab785d83e44d61481f2660b5b2 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 21 Dec 2023 15:03:55 +0700
Subject: [PATCH 2/3] fix(components): fix pr

---
 CHANGELOG.md                                                    | 2 +-
 src/lib/components/table/contracts/ContractsTableMobileCard.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c22574f60..117d71a71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,7 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#692](https://github.com/alleslabs/celatone-frontend/pull/692) Fix ui styling for contract card and states
+- [#693](https://github.com/alleslabs/celatone-frontend/pull/693) Fix ui styling for contract card and states
 - [#690](https://github.com/alleslabs/celatone-frontend/pull/690) Fix query msg regex for Sylvia contract
 - [#689](https://github.com/alleslabs/celatone-frontend/pull/689) Fix execute msg regex for Sylvia contract
 - [#685](https://github.com/alleslabs/celatone-frontend/pull/685) Disable save account in mobile
diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
index d6f239a27..128c65c4b 100644
--- a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
+++ b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -67,7 +67,7 @@ export const ContractsTableMobileCard = ({
             color="text.main"
             wordBreak="break-all"
           >
-            {contractInfo.name || contractInfo.label}
+            {contractInfo.name ?? contractInfo.label}
           </Text>
         </Flex>
         <Flex direction="column">

From 6e8bdfd9978e0acba350c2ae7c31bbc7c6a88a1c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 21 Dec 2023 16:13:03 +0700
Subject: [PATCH 3/3] fix: replace Flex with div

---
 .../table/contracts/ContractsTableMobileCard.tsx   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
index 128c65c4b..70924e763 100644
--- a/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
+++ b/src/lib/components/table/contracts/ContractsTableMobileCard.tsx
@@ -58,8 +58,8 @@ export const ContractsTableMobileCard = ({
       </Flex>
     }
     middleContent={
-      <Flex gap={3} direction="column" maxW="full">
-        <Flex direction="column">
+      <Flex gap={3} direction="column" w="full">
+        <div>
           <MobileLabel label="Contract Name" />
           <Text
             variant="body2"
@@ -69,24 +69,24 @@ export const ContractsTableMobileCard = ({
           >
             {contractInfo.name ?? contractInfo.label}
           </Text>
-        </Flex>
-        <Flex direction="column">
+        </div>
+        <div>
           <InstantiatorRemark remark={contractInfo.remark} />
           <ContractInstantiatorCell
             contractInfo={contractInfo}
             isReadOnly={false}
           />
-        </Flex>
+        </div>
       </Flex>
     }
     bottomContent={
       contractInfo.latestUpdated ? (
-        <Flex direction="column">
+        <div>
           <Text variant="body3">{formatUTC(contractInfo.latestUpdated)}</Text>
           <Text variant="body3" color="text.dark">
             {`(${dateFromNow(contractInfo.latestUpdated)})`}
           </Text>
-        </Flex>
+        </div>
       ) : null
     }
   />