@duro-app/ui 0.43.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^0.43.0"
+    "@duro-app/tokens": "^0.44.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/Table.stories.tsx

@@ -1134,3 +1134,60 @@ export const SlotPropsOnRoot: Story = {
     await expect(canvas.getAllByText('Name').length).toBeGreaterThan(0)
   },
 }
+
+// --- Regression: many columns + long content must wrap, not overlap ---
+//
+// In a wide-but-tight container, columns whose combined content exceeds the
+// width used to keep their intrinsic size (minWidth: auto) and spill over their
+// grid track into the next column. Cells now shrink to their track and wrap.
+const overlapWrapStyles = css.create({
+  wide: {width: 760},
+})
+
+const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'
+
+export const ManyColumnsWrapNoOverlap: Story = {
+  render: () => (
+    <html.div style={overlapWrapStyles.wide}>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Display Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Email</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+            <Table.HeaderCell width="max-content">Actions</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>SMTP submission service account</Table.Cell>
+            <Table.Cell>
+              <Badge>User</Badge>
+            </Table.Cell>
+            <Table.Cell>{LONG_EMAIL}</Table.Cell>
+            <Table.Cell>
+              <Badge variant="warning">No certs</Badge>
+            </Table.Cell>
+            <Table.Cell isActions>
+              <Button size="small">Send Cert</Button>
+              <Button size="small" variant="secondary">
+                Certificates
+              </Button>
+              <Button size="small" variant="danger">
+                Revoke All
+              </Button>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const emailCell = canvas.getByText(LONG_EMAIL).closest('[role="cell"]') as HTMLElement
+    await expect(emailCell).toBeTruthy()
+    // The long email wraps inside its column instead of overflowing into the
+    // next one: the cell's content is no wider than the cell box.
+    await expect(emailCell.scrollWidth).toBeLessThanOrEqual(emailCell.clientWidth + 2)
+  },
+}

package/src/components/Table/Table.tsx

@@ -460,7 +460,7 @@ export function Cell({children, isActions}: {children: ReactNode; isActions?: bo
       {responsive && !isActions && label !== '' ? (
         <html.span style={styles.cellLabel}>{label}</html.span>
       ) : null}
-      {children}
+      {isActions ? children : <html.div style={styles.cellValue}>{children}</html.div>}
     </html.div>
   )
 }

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

@@ -154,6 +154,10 @@ export const styles = css.create({
     fontWeight: typography.fontWeightSemibold,
     color: colors.textMuted,
     textAlign: 'start',
+    // Match the body cell: shrink inside the track + wrap, so header labels
+    // don't overlap when many columns are cramped.
+    minWidth: 0,
+    overflowWrap: 'break-word',
     whiteSpace: {
       default: 'normal',
       [`@container (max-width: ${COMPACT_BP})`]: 'nowrap',
@@ -176,14 +180,13 @@ export const styles = css.create({
       [`@container (max-width: ${STACK_BP})`]: 'grid',
     },
     alignItems: 'center',
-    minWidth: {
-      // Allow the cell to shrink inside its grid track. In default (wide)
-      // mode there's enough room so `auto` is fine; in compact and stack
-      // we explicitly drop to 0 so wrappable content can size to the
-      // track instead of forcing the track to grow.
-      default: 'auto',
-      [`@container (max-width: ${COMPACT_BP})`]: 0,
-    },
+    // Always let the cell shrink inside its `minmax(0, 1fr)` track. Previously
+    // this was `auto` in the default (wide) band on the assumption there's
+    // "enough room" — but a table with many columns (or wide content) whose
+    // combined intrinsic width exceeds the container then can't shrink, so
+    // content spills its track and overlaps the next column. `0` + the
+    // wrapping below keeps every cell inside its column at any width.
+    minWidth: 0,
     overflow: {
       // Safety against pathological unbreakable content (long URLs,
       // dataless ids) at narrow widths.
@@ -191,6 +194,9 @@ export const styles = css.create({
       [`@container (max-width: ${COMPACT_BP})`]: 'hidden',
     },
     whiteSpace: 'normal',
+    // Break long unbreakable tokens (emails, UUIDs) so they wrap within the
+    // column instead of forcing it wider / overflowing.
+    overflowWrap: 'break-word',
     gridTemplateColumns: {
       default: null,
       [`@container (max-width: ${STACK_BP})`]: '1fr 2fr',
@@ -201,6 +207,16 @@ export const styles = css.create({
     },
   },
 
+  // Wrapper around a (non-actions) cell's value. A raw text node is an
+  // anonymous flex item with `min-width: auto`, so it refuses to shrink and
+  // overflows its column even when the cell itself can shrink. Giving the value
+  // its own `min-width: 0` flex item lets the text wrap inside the column.
+  cellValue: {
+    minWidth: 0,
+    flexGrow: 1,
+    overflowWrap: 'break-word',
+  },
+
   // Label rendered as a real <span> inside each cell. Display:none in
   // default/compact, shown only in stack — matches StyleX guidance to
   // prefer real elements over ::before/::after for non-shadow-DOM cases.