fix(components): fix contract card and states ui

CHANGELOG.md

@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#693](https://github.com/alleslabs/celatone-frontend/pull/693) Fix ui styling for contract card and states
 - [#687](https://github.com/alleslabs/celatone-frontend/pull/687) Fix resource and module related bugs
 - [#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

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} />

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>

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}

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}