fix: cell padding

Author: DanielSchiavini

apps/main/src/llamalend/PageLlamaMarkets/cells/MarketTitleCell/MarketTitleCell.tsx

@@ -1,7 +1,6 @@
 import { MouseEvent } from 'react'
 import { LlamaMarket } from '@/llamalend/entities/llama-markets'
 import { MarketBadges } from '@/llamalend/PageLlamaMarkets/cells/MarketTitleCell/MarketBadges'
-import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { CellContext } from '@tanstack/react-table'
@@ -17,14 +16,11 @@ import { UserPositionIndicator } from './UserPositionIndicator'
 
 const { Spacing } = SizesAndSpaces
 
-// the padding is removed from this cell, so we can show the indicator on the border, the spacer returns it back
-const PaddingSpacer = () => <Box sx={{ width: Spacing.md }} />
-
 export const MarketTitleCell = ({ row: { original: market } }: CellContext<LlamaMarket, LlamaMarket['assets']>) => {
   const isMobile = useIsMobile()
   return (
     <Stack direction="row" gap={Spacing.sm} alignItems="center" sx={{ height: Sizing[700] }}>
-      {market.userHasPosition ? <UserPositionIndicator market={market} /> : <PaddingSpacer />}
+      {market.userHasPosition && <UserPositionIndicator market={market} />}
       <TokenPair
         chain={market.chain}
         assets={{ primary: market.assets.collateral, secondary: market.assets.borrowed }}

apps/main/src/llamalend/PageLlamaMarkets/cells/MarketTitleCell/UserPositionIndicator.tsx

@@ -6,11 +6,12 @@ import type { Theme } from '@mui/material/styles'
 import { t } from '@ui-kit/lib/i18n'
 import { LlamaIcon } from '@ui-kit/shared/icons/LlamaIcon'
 import { Tooltip } from '@ui-kit/shared/ui/Tooltip'
+import { mapBreakpoints } from '@ui-kit/themes/basic-theme'
 import { Duration } from '@ui-kit/themes/design/0_primitives'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { LlamaMarketColumnId } from '../../columns.enum'
 
-const { IconSize } = SizesAndSpaces
+const { IconSize, Spacing } = SizesAndSpaces
 
 type BackgroundColor = (theme: Theme) => string
 const info: BackgroundColor = (t) => t.design.Layer.Feedback.Info
@@ -48,7 +49,15 @@ export const UserPositionIndicator = ({ market }: { market: LlamaMarket }) => {
           : t`You have a position in this market`
       }
     >
-      <Stack sx={{ backgroundColor, alignSelf: 'stretch', justifyContent: 'center' }}>
+      <Stack
+        sx={{
+          backgroundColor,
+          alignSelf: 'stretch',
+          justifyContent: 'center',
+          paddingInlineStart: mapBreakpoints(Spacing.md, (v) => `-${v}`), // negative padding to offset the padding of the cell
+          paddingInlineEnd: Spacing.sm,
+        }}
+      >
         <LlamaIcon sx={{ color: (t) => t.design.Layer[1].Outline, width: IconSize.md, height: IconSize.md }} />
       </Stack>
     </Tooltip>

apps/main/src/llamalend/PageLlamaMarkets/columns.tsx

@@ -33,7 +33,6 @@ export const LLAMA_MARKET_COLUMNS = [
     header: t`Collateral • Borrow`,
     cell: MarketTitleCell,
     filterFn: filterByText,
-    meta: { noPadding: true },
   }),
   columnHelper.display({
     id: LlamaMarketColumnId.UserHealth,

apps/main/src/llamalend/entities/llama-market-stats.ts

@@ -39,6 +39,7 @@ export function useUserMarketStats(market: LlamaMarket, column?: LlamaMarketColu
   return {
     ...(stats && {
       data: {
+        softLiquidation: stats.softLiquidation,
         isCollateralEroded: stats.softLiquidation && stats.debt > 0,
         health: stats.healthFull,
         borrowed: stats.debt,

packages/curve-ui-kit/src/shared/ui/DataTable/DataCell.tsx

@@ -19,15 +19,15 @@ export function getCellSx<T extends TableItem>({
   showCollapseIcon?: boolean
   isSticky: boolean
 }) {
-  const { borderRight, noPadding } = column.columnDef.meta ?? {}
+  const { borderRight } = column.columnDef.meta ?? {}
   // with the collapse icon there is an extra wrapper, so keep the sx separate
   const wrapperSx = {
     textAlign: getAlignment(column),
-    ...(!noPadding && { paddingInline: Spacing.sm }),
+    paddingInline: Spacing.sm,
   }
   const sx = {
     ...(!showCollapseIcon && wrapperSx),
-    ...(!noPadding && getExtraColumnPadding(column)),
+    ...getExtraColumnPadding(column),
     ...((borderRight || isSticky) && { borderInlineEnd: (t: Theme) => `1px solid ${t.design.Layer[1].Outline}` }),
     ...(isSticky && {
       position: 'sticky',

packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts

@@ -1,4 +1,5 @@
 /// <reference path="./basic-theme.d.ts" />
+import { recordEntries } from '@curvefi/prices-api/objects.util'
 import { Breakpoint } from '@mui/material'
 import { createTheme as createMuiTheme } from '@mui/material/styles'
 import { CSSObject } from '@mui/styled-engine'
@@ -61,8 +62,6 @@ export const handleBreakpoints = (values: Record<keyof CSSObject, number | strin
 
 export const mapBreakpoints = (
   values: Responsive,
-  callback: (value: string, breakpoint: Breakpoint) => CSSObject,
+  callback: (value: string, breakpoint: Breakpoint) => string,
 ): CSSObject =>
-  Object.fromEntries(
-    Object.entries(values).map(([breakpoint, value]) => [breakpoint, callback(value, breakpoint as Breakpoint)]),
-  )
+  Object.fromEntries(recordEntries(values).map(([breakpoint, value]) => [breakpoint, callback(value, breakpoint)]))