fix: update column alignment in portfolio (#1033)

* update column alignment * adjust widths
balancer · Aug 30, 2024 · eff9580 · eff9580
1 parent d10b72c
commit eff9580
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git a/lib/modules/portfolio/PortfolioTable/PortfolioTable.tsx b/lib/modules/portfolio/PortfolioTable/PortfolioTable.tsx
@@ -47,13 +47,9 @@ export const portfolioOrderBy: {
   },
 ]
 
-const numberColumnWidth = '125px'
-const furthestLeftColWidth = '140px'
-
 const rowProps = {
   px: [0, 4],
-  gridTemplateColumns: `32px minmax(320px, 1fr) 100px
-  ${furthestLeftColWidth} ${numberColumnWidth} ${numberColumnWidth} 145px`,
+  gridTemplateColumns: `32px minmax(320px, 1fr) repeat(2, 100px) 120px 130px 170px`,
   alignItems: 'center',
   gap: { base: 'xxs', xl: 'lg' },
 }

diff --git a/lib/modules/portfolio/PortfolioTable/PortfolioTableHeader.tsx b/lib/modules/portfolio/PortfolioTable/PortfolioTableHeader.tsx
@@ -50,7 +50,7 @@ export function PortfolioTableHeader({ currentSortingObj, setCurrentSortingObj,
               setCurrentSortingObj({ id: orderByItem.id, desc: false })
             }
           }}
-          align="right"
+          align={index === 0 ? 'left' : 'right'}
         />
       ))}
     </Grid>

diff --git a/lib/modules/portfolio/PortfolioTable/PortfolioTableRow.tsx b/lib/modules/portfolio/PortfolioTable/PortfolioTableRow.tsx
@@ -75,16 +75,14 @@ export function PortfolioTableRow({ pool, keyValue, veBalBoostMap, ...rest }: Pr
                 {getPoolTypeLabel(pool.type)}
               </Text>
             </GridItem>
-            <GridItem display="flex" justifyContent="right">
+            <GridItem display="flex" justifyContent="left" px="sm">
               <HStack>
-                <Text textAlign="right" fontWeight="medium">
-                  {stakingText}{' '}
-                </Text>
+                <Text fontWeight="medium">{stakingText} </Text>
                 <StakingIcons pool={pool} />
               </HStack>
             </GridItem>
             {/* TO-DO vebal boost */}
-            <GridItem textAlign="right">
+            <GridItem px="sm">
               <Text
                 title={toCurrency(pool.dynamicData.volume24h, { abbreviated: false })}
                 textAlign="right"
@@ -93,12 +91,12 @@ export function PortfolioTableRow({ pool, keyValue, veBalBoostMap, ...rest }: Pr
                 {vebalBoostValue ? `${Number(vebalBoostValue).toFixed(2)}x` : '-'}
               </Text>
             </GridItem>
-            <GridItem>
+            <GridItem px="sm">
               <Text textAlign="right" fontWeight="medium">
                 {toCurrency(pool.poolPositionUsd, { abbreviated: false })}
               </Text>
             </GridItem>
-            <GridItem justifySelf="end">
+            <GridItem justifySelf="end" px="sm">
               {pool.poolType === ExpandedPoolType.StakedAura ? (
                 pool.staking?.aura?.apr ? (
                   <AuraAprTooltip auraApr={pool.staking?.aura?.apr} />