fix: column width in list

.changeset/clear-steaks-share.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Fix `List.Cell` width when it is in %

packages/ui/src/components/List/Cell.tsx

@@ -6,7 +6,15 @@ import type { CSSProperties, ReactNode } from 'react'
 import { forwardRef } from 'react'
 import { useColumnProvider } from './ColumnProvider'
 import { listCell } from './styles.css'
-import { maxWidthCell, minWidthCell, widthCell } from './variables.css'
+import {
+  listCellPadding,
+  maxWidthCell,
+  maxWidthChildrenCell,
+  minWidthCell,
+  minWidthChildrenCell,
+  widthCell,
+  widthChildrenCell,
+} from './variables.css'
 
 type CellProps = {
   children?: ReactNode
@@ -18,7 +26,22 @@ type CellProps = {
 
 export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
   ({ children, className, 'data-testid': dataTestid, colSpan, style }, ref) => {
-    const { maxWidth, minWidth, width } = useColumnProvider()
+    const context = useColumnProvider()
+
+    const width = context?.width
+    const maxWidth = context?.width
+    const minWidth = context?.width
+
+    /** Remove padding from width to avoid overflow since boxSizing = 'content-box' */
+    const widthChildren = width?.includes('%')
+      ? '100%'
+      : `calc(${widthCell} - ${listCellPadding} - ${listCellPadding})`
+    const maxWidthChildren = maxWidth?.includes('%')
+      ? '100%'
+      : `calc(${maxWidth} - ${listCellPadding} - ${listCellPadding})`
+    const minWidthChildren = minWidth?.includes('%')
+      ? '100%'
+      : `calc(${minWidth} - ${listCellPadding} - ${listCellPadding})`
 
     return (
       <td
@@ -28,9 +51,12 @@ export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
         ref={ref}
         style={{
           ...assignInlineVars({
-            [widthCell]: width,
-            [minWidthCell]: minWidth,
-            [maxWidthCell]: maxWidth,
+            [widthCell]: width ?? 'auto',
+            [minWidthCell]: minWidth ?? 'auto',
+            [maxWidthCell]: maxWidth ?? 'none',
+            [widthChildrenCell]: width ? widthChildren : 'auto',
+            [maxWidthChildrenCell]: maxWidth ? maxWidthChildren : 'none',
+            [minWidthChildrenCell]: minWidth ? minWidthChildren : 'auto',
           }),
           ...style,
         }}

packages/ui/src/components/List/ColumnProvider.tsx

@@ -3,9 +3,9 @@ import { createContext, useContext } from 'react'
 
 type ContextType =
   | {
-      width: string
-      maxWidth: string
-      minWidth: string
+      width?: string
+      maxWidth?: string
+      minWidth?: string
     }
   | undefined
 
@@ -25,26 +25,14 @@ export const ColumnProvider = ({
 }: ColumnProviderProps) => (
   <ColumnContext.Provider
     value={{
-      maxWidth: maxWidth ?? 'none',
-      minWidth: minWidth ?? 'auto',
-      width: width ?? 'auto',
+      maxWidth,
+      minWidth,
+      width,
     }}
   >
     {children}
   </ColumnContext.Provider>
 )
 
 // oxlint-disable-next-line react/only-export-components
-export const useColumnProvider = () => {
-  const context = useContext(ColumnContext)
-
-  if (!context) {
-    return {
-      maxWidth: 'none',
-      minWidth: 'auto',
-      width: 'auto',
-    }
-  }
-
-  return context
-}
+export const useColumnProvider = () => useContext(ColumnContext)