fix: position manager UI details (#10066)

pancakeswap · Jun 21, 2024 · ef6d93a · ef6d93a
1 parent 6025f26
commit ef6d93a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/apps/web/src/views/PositionManagers/components/TableView/FarmCell.tsx b/apps/web/src/views/PositionManagers/components/TableView/FarmCell.tsx
@@ -64,11 +64,11 @@ export const FarmCell = memo(function CardTitle({
         justifyContent={isMobile ? 'space-between' : 'flex-start'}
         height="100%"
         alignItems="center"
-        style={{ gap: isMobile ? '25px' : undefined }}
+        style={{ gap: isMobile ? '15px' : undefined }}
       >
         <Flex
           flexDirection="row"
-          justifyContent="flex-end"
+          justifyContent={isMobile ? 'flex-start' : 'flex-end'}
           alignItems="center"
           mr="10px"
           height="40px"
@@ -84,7 +84,7 @@ export const FarmCell = memo(function CardTitle({
         </Flex>
         <Flex
           flexDirection="row"
-          justifyContent="flex-end"
+          justifyContent={isMobile ? 'flex-start' : 'flex-end'}
           alignItems="center"
           mt="0.25em"
           style={{ gap: '0.5em', left: isMobile ? -20 : 0 }}

diff --git a/apps/web/src/views/PositionManagers/components/TableView/LiquidityManagement.tsx b/apps/web/src/views/PositionManagers/components/TableView/LiquidityManagement.tsx
@@ -121,7 +121,10 @@ export const LiquidityManagement = memo(function LiquidityManagement({
     <>
       {hasStaked ? (
         <AtomBox>
-          <ActionContainer flexDirection={!isDesktop ? 'column' : 'row'}>
+          <ActionContainer
+            flexDirection={!isDesktop ? 'column' : 'row'}
+            style={{ flexWrap: isDesktop ? 'nowrap' : 'wrap' }}
+          >
             <Flex flexDirection="column" flexBasis="50%">
               <StakedAssets
                 currencyA={currencyA}

diff --git a/apps/web/src/views/PositionManagers/components/TableView/index.tsx b/apps/web/src/views/PositionManagers/components/TableView/index.tsx
@@ -12,7 +12,7 @@ import { useBCakeBoostLimitAndLockInfo } from 'views/Farms/components/YieldBoost
 /* eslint-disable no-case-declarations */
 import { useDelayedUnmount } from '@pancakeswap/hooks'
 import { useTranslation } from '@pancakeswap/localization'
-import { Flex, useMatchBreakpoints } from '@pancakeswap/uikit'
+import { Box, Flex, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { useCurrencyUsdPrice } from 'hooks/useCurrencyUsdPrice'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useIsWrapperWhiteList } from '../../hooks/useWrapperBooster'
@@ -362,7 +362,7 @@ export const TableRow: React.FC<Props> = ({ config, farmsV3, aprDataList, update
         <>
           <tr style={{ cursor: 'pointer' }} onClick={toggleActionPanel}>
             <FarmMobileCell colSpan={3}>
-              <Flex justifyContent="flex-start" alignItems="center">
+              <Flex justifyContent="flex-start" alignItems="center" position="relative">
                 <FarmCell
                   currencyA={currencyA}
                   currencyB={currencyB}
@@ -374,7 +374,11 @@ export const TableRow: React.FC<Props> = ({ config, farmsV3, aprDataList, update
                   allowDepositToken1={allowDepositToken1 ?? false}
                   isBooster={isBoosterWhiteList && apr?.isInCakeRewardDateRange}
                 />
-                {hasSwellReward ? <SwellTooltip /> : null}
+                {hasSwellReward ? (
+                  <Box position="absolute" right="10px">
+                    <SwellTooltip />
+                  </Box>
+                ) : null}
               </Flex>
             </FarmMobileCell>
           </tr>