fix: vertical style

Author: mosshqq

packages/popup/src/App.js

@@ -264,7 +264,7 @@ const AppRoutes = withRouter(
     return (
       <div
         id="router"
-        className={`m-auto light relative overflow-hidden ${
+        className={`mx-auto light relative overflow-hidden ${
           FULL_WINDOW_ROUTES.includes(location.pathname) ||
           isRunningInSidePanel()
             ? 'h-screen w-full'

packages/popup/src/components/SlideCard.js

@@ -3,6 +3,7 @@ import {useClickAway} from 'react-use'
 import {CloseCircleFilled} from '@fluent-wallet/component-icons'
 import {useRef} from 'react'
 import {useSlideAnimation} from '../hooks'
+import {isRunningInSidePanel} from '../utils/side-panel'
 
 function SlideCard({
   onClose,
@@ -16,12 +17,15 @@ function SlideCard({
   id = '',
   containerClassName = '',
   cardClassName = '',
-  width = 'w-93',
-  height = 'h-125',
+  width,
+  height,
   backgroundColor = 'bg-bg',
   direction = 'vertical',
 }) {
   const animateStyle = useSlideAnimation(open, direction, needAnimation)
+  const inSidePanel = isRunningInSidePanel()
+  width = width ?? (inSidePanel ? 'w-full' : 'w-93')
+  height = height ?? (inSidePanel ? 'h-125 max-h-[80%]' : 'h-125')
   const ref = useRef(null)
 
   useClickAway(ref, e => {

packages/popup/src/index.js

@@ -16,6 +16,7 @@ if (isRunningInSidePanel()) {
   sidePanelSheet.insertRule(`
     html, body {
       width: 100%;
+      overflow: hidden;
     }
   `)
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, sidePanelSheet]

packages/popup/src/pages/Home/components/AccountList.js

@@ -17,7 +17,6 @@ import {
 } from '../../../components'
 import {useAccountList, useCurrentAddress} from '../../../hooks/useApi'
 import {RPC_METHODS, ROUTES} from '../../../constants'
-import {isRunningInSidePanel} from '../../../utils/side-panel'
 
 const {WALLET_SET_CURRENT_ACCOUNT} = RPC_METHODS
 const {SELECT_CREATE_TYPE} = ROUTES
@@ -198,7 +197,6 @@ function AccountList({onClose, open, accountsAnimate = true}) {
           onChangeAccount={onChangeAccount}
         />
       }
-      width={isRunningInSidePanel() ? 'w-full' : undefined}
     />
   ) : null
 }

packages/popup/src/pages/Home/components/AddToken.js

@@ -29,7 +29,6 @@ import {
 } from '../../../hooks/useApi'
 import useLoading from '../../../hooks/useLoading'
 import {request, validateAddress} from '../../../utils'
-import {isRunningInSidePanel} from '../../../utils/side-panel'
 
 const {WALLET_WATCH_ASSET, WALLET_UNWATCH_ASSET} = RPC_METHODS
 
@@ -38,7 +37,6 @@ function AddToken({onClose, open}) {
   const [searchContent, setSearchContent] = useState('')
   const [showDeleteButtonTokenId, setShowDeleteButtonTokenId] = useState('')
   const [maskClosable, setMaskClosable] = useState(true)
-  const inSidePanel = isRunningInSidePanel()
 
   const {setLoading} = useLoading()
   const [debouncedSearchContent, setDebouncedSearchContent] =
@@ -205,7 +203,6 @@ function AddToken({onClose, open}) {
           {!tokenList && <NoResult content={t('noResult')} />}
         </div>
       }
-      width={inSidePanel ? 'w-full' : undefined}
     />
   )
 }

packages/popup/src/pages/Home/components/NetworkList.js

@@ -5,7 +5,6 @@ import {Link} from 'react-router-dom'
 import {SlideCard, NetworkContent} from '../../../components'
 import {ROUTES} from '../../../constants'
 import {usePreferences} from '../../../hooks/useApi'
-import {isRunningInSidePanel} from '../../../utils/side-panel'
 
 const {ADVANCED_SETTINGS} = ROUTES
 
@@ -45,7 +44,6 @@ function NetworkList({onClose, open}) {
           }}
         />
       }
-      width={isRunningInSidePanel() ? 'w-full' : undefined}
     />
   )
 }

packages/popup/src/pages/Home/index.css

@@ -7,6 +7,15 @@
   content: '';
 }
 
+.home-container.in-side-panel::before {
+  @apply absolute w-[100%] h-[210px] left-[0] top-[0] bg-secondary;
+
+  transform: unset;
+  border-radius: unset;
+  transition: none;
+  content: '';
+}
+
 .home-container::after {
   @apply absolute left-0 top-0 bottom-0 right-0 bg-homepage-background bg-no-repeat;
 

packages/popup/src/pages/Home/index.js

@@ -33,6 +33,7 @@ import {
   CrossSpaceButton,
 } from './components'
 import {IS_DEV_MODE} from '@fluent-wallet/inner-utils'
+import {isRunningInSidePanel} from '../../utils/side-panel'
 function Home() {
   const {t} = useTranslation()
   const [accountStatus, setAccountStatus] = useState(false)
@@ -119,7 +120,9 @@ function Home() {
 
   return (
     <div
-      className="home-container flex flex-col bg-bg h-full w-full relative overflow-hidden"
+      className={`home-container flex flex-col bg-bg h-full w-full relative overflow-hidden ${
+        isRunningInSidePanel() ? 'in-side-panel' : ''
+      }`}
       id="homeContainer"
     >
       {/* only for dev env*/}