fix: remove responsive height in connected apps (#656)

onbloc · Jan 16, 2025 · 3766307 · 3766307
1 parent 42b006e
commit 3766307
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/packages/adena-extension/src/components/atoms/list-box/index.tsx b/packages/adena-extension/src/components/atoms/list-box/index.tsx
@@ -78,22 +78,19 @@ const Wrapper = styled.div<ListBoxStyleProps>`
     if (mode === ListHierarchy.Static) return modeVariants.static;
     return modeVariants.default;
   }}
+  flex-shrink: 0;
   width: 100%;
   height: 60px;
   padding: ${({ padding }): CSSProperties['padding'] => (padding ? padding : '0px 17px 0px 14px')};
   transition: all 0.4s ease;
-  cursor: ${({ cursor }): CSSProperties['cursor'] => cursor ?? 'pointer'};
   border-radius: 18px;
+  cursor: ${({ cursor }): CSSProperties['cursor'] => cursor ?? 'pointer'};
+
   .logo {
     margin-right: 12px;
   }
+
   & + & {
     margin-top: 12px;
   }
-  /* & > :nth-child(2) {
-    margin-left: 12px;
-  }
-  & > :nth-child(3) {
-    margin-left: auto;
-  } */
 `;
diff --git a/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx b/packages/adena-extension/src/pages/popup/certify/connected-apps/index.tsx
@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
+import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import styled, { useTheme } from 'styled-components';
 
-import { Text, ListBox, ListHierarchy } from '@components/atoms';
-import { LoadingNft, CloseShadowButton } from '@components/molecules';
-import { getTheme } from '@styles/theme';
-import { WalletState } from '@states';
-import DefaultImage from '@assets/favicon-default-small.svg';
 import disconnected from '@assets/disconnected.svg';
+import DefaultImage from '@assets/favicon-default-small.svg';
+import { ListBox, ListHierarchy, Text } from '@components/atoms';
+import { CloseShadowButton, LoadingNft } from '@components/molecules';
+import useAppNavigate from '@hooks/use-app-navigate';
 import { useAdenaContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
+import { WalletState } from '@states';
 import mixins from '@styles/mixins';
-import useAppNavigate from '@hooks/use-app-navigate';
+import { getTheme } from '@styles/theme';
 
 export const ConnectedApps = (): JSX.Element => {
   const theme = useTheme();
@@ -83,6 +83,9 @@ export const ConnectedApps = (): JSX.Element => {
               No connections
             </Text>
           )}
+
+          <div className='empty-box' />
+
           <CloseShadowButton onClick={goBack} />
         </>
       ) : (
@@ -120,6 +123,14 @@ const Wrapper = styled.main`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .empty-box {
+    ${mixins.flex({ direction: 'row' })};
+    flex-shrink: 0;
+    width: 100%;
+    height: 96px;
+    margin-top: 20px;
+  }
 `;
 
 const DisconnectedBtn = styled.button`