From 24c0cd4be5a42b239c7e6bf80d52377de63014d0 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Thu, 19 Oct 2023 19:05:09 +0700
Subject: [PATCH] #Fix responsive for CrowdloanContribution

---
 .../CheckCrowdloanContributions.tsx                 |  9 +++++++++
 .../CrowdloanContributionsResult.tsx                | 13 +++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CheckCrowdloanContributions.tsx b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CheckCrowdloanContributions.tsx
index fee6594734b..e7752d4fbe9 100644
--- a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CheckCrowdloanContributions.tsx
+++ b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CheckCrowdloanContributions.tsx
@@ -386,6 +386,7 @@ const CheckCrowdloanContributions = styled(Component)<Props>(({ theme: { token }
 
     '.__form-buttons': {
       display: 'flex',
+      flexWrap: 'wrap',
       gap: token.size
     },
 
@@ -478,6 +479,14 @@ const CheckCrowdloanContributions = styled(Component)<Props>(({ theme: { token }
         paddingTop: token.size,
         paddingBottom: token.size
       }
+    },
+
+    '@media (max-width: 767px)': {
+      '.__form-buttons': {
+        '.ant-btn': {
+          minWidth: '100%'
+        }
+      }
     }
   };
 });
diff --git a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx
index a45f7922a8b..6e9897afe3c 100644
--- a/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx
+++ b/packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx
@@ -311,7 +311,7 @@ const Component: React.FC<Props> = ({ className = '' }: Props) => {
         dataIndex: 'name',
         key: 'name',
         render: (_: any, row: TableItem) => {
-          const [, text2] = getUnlockTexts(row.paraState);
+          const [text1, text2] = getUnlockTexts(row.paraState);
 
           return <div className='project-container'>
             <Logo
@@ -329,7 +329,7 @@ const Component: React.FC<Props> = ({ className = '' }: Props) => {
               </div>
 
               {isWebUI && (<div className={'project-parachain'}>{`${row.relayChainName} ${t('parachain')}`}</div>)}
-              {!isWebUI && (<div className={'fund-unlock-detail-line-2-for-mobile'}>{`${text2} ${row.unlockTime}`}</div>)}
+              {!isWebUI && (<div className={'fund-unlock-detail-line-2-for-mobile'}>{`${text1} ${text2.toLowerCase()} ${row.unlockTime}`}</div>)}
 
             </div>
           </div>;
@@ -543,6 +543,7 @@ const Component: React.FC<Props> = ({ className = '' }: Props) => {
               onBack={onBack}
               // rightButtons={headerIcons}
               showBackButton
+              paddingVertical
               title={t('Your contributions')}
             />
           )
@@ -825,7 +826,11 @@ const CrowdloanContributionsResult = styled(Component)<Props>(({ theme: { token
     '.fund-unlock-detail-line-2-for-mobile': {
       fontSize: token.fontSizeSM,
       lineHeight: token.lineHeightSM,
-      color: token.colorTextLight4
+      color: token.colorTextLight4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      maxWidth: 156,
     },
 
     '.address-input-icon': {
@@ -966,7 +971,7 @@ const CrowdloanContributionsResult = styled(Component)<Props>(({ theme: { token
       },
 
       '.__form-area': {
-        marginTop: token.margin,
+        marginTop: token.marginXS,
         marginBottom: token.margin
       },