#Fix responsive for CrowdloanContribution

Koniverse · Oct 19, 2023 · 24c0cd4 · 24c0cd4
1 parent 7d4f7c1
commit 24c0cd4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git 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/...ages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx b/...ages/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
       },