@duro-app/ui 0.34.1 → 0.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.34.1",
+  "version": "0.34.3",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.1"
+    "@duro-app/tokens": "^0.34.3"
   },
   "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

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

@@ -48,10 +48,14 @@ export const styles = css.create({
     textAlign: 'end',
   },
 
-  // Truncate
+  // Truncate. minWidth: 0 lets a truncating Text actually shrink inside a
+  // flex/grid container — without it, the default `min-width: auto` would
+  // keep the element at its content width, so text-overflow: ellipsis would
+  // never trigger and the text would just overflow the parent instead.
   truncate: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    minWidth: 0,
   },
 })