@duro-app/ui 0.34.0 → 0.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.0"
+    "@duro-app/tokens": "^0.34.2"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/Table.tsx

@@ -121,7 +121,14 @@ function extractColumnMeta(children: ReactNode): {template: string; labels: stri
         (unwrappedType as {name?: string} | null)?.name ||
         ''
       if (unwrappedType === HeaderCell || displayName === 'HeaderCell') {
-        widths.push(props.width || '1fr')
+        // Default to minmax(0, 1fr) instead of plain '1fr' so each column
+        // can shrink below its content's min-content size. A plain '1fr'
+        // track has an implicit min of `auto` (= min-content), which makes
+        // the column refuse to shrink and the whole table overflow when a
+        // cell's text is wider than 1/N of the container. With minmax(0,
+        // 1fr), the cell's compact-mode `min-width: 0` + `overflow:
+        // hidden` + `text-overflow: ellipsis` can actually truncate.
+        widths.push(props.width || 'minmax(0, 1fr)')
         const explicit = typeof props.label === 'string' ? props.label : undefined
         const fallback = extractText(props.children).trim()
         const label = explicit ?? fallback
@@ -184,7 +191,17 @@ export function Root({
       role="table"
       style={[
         styles.root,
-        template ? styles.gridColumns(template) : undefined,
+        // When responsive, use gridColumnsResponsive so the explicit column
+        // template and the stack-mode @container override live in one StyleX
+        // style object. Splitting them across two styles (gridColumns +
+        // rootResponsive) causes StyleX conflict resolution to drop the
+        // column template because rootResponsive's gridTemplateColumns key
+        // always wins as the later entry in the array.
+        template
+          ? responsive
+            ? styles.gridColumnsResponsive(template)
+            : styles.gridColumns(template)
+          : undefined,
         responsive && styles.rootResponsive,
       ]}
     >

package/src/components/Table/styles.css.ts

@@ -60,13 +60,13 @@ export const styles = css.create({
   },
 
   // Stack-mode override: the Root's grid collapses to a single column so
-  // each Row spans full width and stacks vertically. Applied AFTER the
-  // dynamic gridColumns(template) so this rule wins inside the @container.
+  // each Row spans full width and stacks vertically.
+  // NOTE: gridTemplateColumns is intentionally absent here. It is handled by
+  // gridColumnsResponsive() so that StyleX conflict resolution does not remove
+  // the explicit column template (a later style with the same property key
+  // always wins, so combining gridColumns + rootResponsive in one array would
+  // silently drop the column template).
   rootResponsive: {
-    gridTemplateColumns: {
-      default: null,
-      [`@container (max-width: ${STACK_BP})`]: '1fr',
-    },
     // The card-list look needs the outer border to disappear in stack
     // mode — each row paints its own border.
     borderWidth: {
@@ -298,8 +298,21 @@ export const styles = css.create({
     alignSelf: 'flex-start',
   },
 
-  // Dynamic: grid columns applied on Root
+  // Dynamic: grid columns applied on Root (non-responsive path only).
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,
   }),
+
+  // Dynamic: grid columns + stack-mode collapse in one style.
+  // Used instead of gridColumns() when responsive=true so that both the
+  // explicit column template and the @container override live in the same
+  // StyleX style object. If they were in separate styles (gridColumns +
+  // rootResponsive), StyleX conflict resolution would keep only the LAST
+  // style's gridTemplateColumns class and silently discard the earlier one.
+  gridColumnsResponsive: (template: string) => ({
+    gridTemplateColumns: {
+      default: template,
+      [`@container (max-width: ${STACK_BP})`]: '1fr',
+    },
+  }),
 })