@duro-app/ui 0.45.0 → 0.47.0

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

@@ -3,13 +3,15 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {breakpoints} from '@duro-app/tokens/tokens/breakpoints.css'
 
-// Container-query thresholds. Picked for typical 5-7 column admin tables —
-// see Table.stories.tsx "Responsive" for the visual reasoning. Defined
-// once here so it's clear they're a design-system constant, not a magic
-// number sprinkled across files.
-const COMPACT_BP = '720px'
-const STACK_BP = '440px'
+// Container-query thresholds, from the shared breakpoint scale. `sm` (640px)
+// is the single "card up" line used across every table (Table + VirtualTable);
+// below it dense tables become cards, above it they stay tabular and scroll
+// horizontally. `md` (768px) is the compact band (tighter padding, nowrap
+// headers). These are inlined into the @container query text at build time.
+const COMPACT_BP = breakpoints.md
+const STACK_BP = breakpoints.sm
 
 export const styles = css.create({
   // Outer wrapper that hosts the @container query. Wraps SortChip + Root
@@ -68,6 +70,16 @@ export const styles = css.create({
   // always wins, so combining gridColumns + rootResponsive in one array would
   // silently drop the column template).
   rootResponsive: {
+    // Size the grid to its content so it can OVERFLOW the scroll wrapper
+    // rather than shrink: `min-content` here is the sum of each column's
+    // minimum track (the minmax() floor / its content), so a dense table
+    // grows past the container and Root's `scrollX` wrapper scrolls sideways.
+    // In stack mode the grid is a single column, so drop the floor to let the
+    // card fill the width instead of forcing a horizontal scrollbar.
+    minWidth: {
+      default: 'min-content',
+      [`@container (max-width: ${STACK_BP})`]: 0,
+    },
     // The card-list look needs the outer border to disappear in stack
     // mode — each row paints its own border.
     borderWidth: {
@@ -320,61 +332,19 @@ export const styles = css.create({
     alignSelf: 'flex-start',
   },
 
-  // --- JS-measured force-stack variants ---
-  //
-  // A container query can only test the container's WIDTH — it can't know
-  // "6 columns won't fit here". So a dense table can be wider than STACK_BP
-  // yet still crush every cell to a few characters. Table.Root measures the
-  // container with a ResizeObserver and, when `width < columnCount ×
-  // minColumnWidth`, sets `stacked` in context; each component then also
-  // applies its `*Stacked` variant here. These mirror the values in the
-  // `@container (max-width: ${STACK_BP})` branches above, so JS-forced and
-  // CSS-driven stacking render identically. The @container base is kept as
-  // the SSR-safe path for genuinely narrow (mobile) widths — no JS, no
-  // hydration flash — while these handle the cramped medium-width case.
-  rootStacked: {
-    gridTemplateColumns: '1fr',
-    borderWidth: 0,
-    backgroundColor: 'transparent',
-    overflow: 'visible',
-    rowGap: spacing.sm,
-  },
-  headerStacked: {
-    display: 'none',
-  },
-  rowStacked: {
-    gridTemplateColumns: '1fr',
-    borderBottomWidth: 0,
-  },
-  bodyRowStacked: {
-    backgroundColor: {
-      default: colors.bgCard,
-      ':hover': colors.bgCardHover,
-    },
-    padding: spacing.sm,
-    borderRadius: radii.sm,
-    borderWidth: 1,
-  },
-  cellStacked: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 2fr',
-    gap: spacing.sm,
-  },
-  cellLabelStacked: {
-    display: 'block',
-  },
-  cellActionsStacked: {
-    gridTemplateColumns: '1fr',
-    justifyContent: 'flex-end',
-    marginTop: spacing.sm,
-    paddingTop: spacing.sm,
-    borderTopWidth: 1,
-  },
-  borderedCellStacked: {
-    borderRightWidth: 0,
-  },
-  sortChipStacked: {
-    display: 'inline-flex',
+  // Horizontal-scroll frame around the grid (responsive path). Above the
+  // stack breakpoint the grid keeps each column at least `minColumnWidth`
+  // wide (see the minmax() template), so a dense table overflows and this
+  // wrapper scrolls sideways instead of crushing its cells — the standard
+  // data-table behavior. In stack mode the grid collapses to one column, so
+  // nothing overflows and no scrollbar appears.
+  scrollX: {
+    overflowX: 'auto',
+    // Contain the scroll to this axis; vertical growth (rows) is natural.
+    overflowY: 'visible',
+    // Momentum scroll on touch + a stable gutter so the layout doesn't jump
+    // when the scrollbar shows.
+    WebkitOverflowScrolling: 'touch',
   },
 
   // Dynamic: grid columns applied on Root (non-responsive path only).
@@ -389,15 +359,18 @@ export const styles = css.create({
   // earlier classes (the LAST style wins per property key).
   //
   // - default: balanced multi-column layout for desktop widths
-  // - @container (max-width: COMPACT_BP): consumer-supplied "compact"
-  //   template, e.g. give a badge column max-content and let the action
-  //   column absorb the slack so its hint text fits on one line
+  // - compact band (STACK_BP < width ≤ COMPACT_BP): consumer-supplied
+  //   "compact" template. This is written as an explicit RANGE, not just
+  //   `max-width: COMPACT_BP`, so it does NOT also match below STACK_BP —
+  //   otherwise both the compact and the stack rule would set
+  //   gridTemplateColumns at card widths and StyleX's ordering could let the
+  //   (wider, 4-column) compact template shadow the single-column stack one.
   // - @container (max-width: STACK_BP): collapse to a single column so
   //   each row becomes a card
   gridColumnsResponsive: (template: string, compactTemplate: string) => ({
     gridTemplateColumns: {
       default: template,
-      [`@container (max-width: ${COMPACT_BP})`]: compactTemplate,
+      [`@container (${STACK_BP} < width <= ${COMPACT_BP})`]: compactTemplate,
       [`@container (max-width: ${STACK_BP})`]: '1fr',
     },
   }),

package/src/components/Tag/Tag.stories.tsx

@@ -49,8 +49,30 @@ export const Small: Story = {
 const layoutStyles = css.create({
   row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
   stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  // Narrow column that a long identifier tag would overflow without `wrap`.
+  narrowCol: {width: 120, borderWidth: 1, borderStyle: 'solid', borderColor: '#333', padding: 8},
 })
 
+const LONG_CAP = 'lldap.group.member.remove'
+
+// A long identifier-style tag in a narrow column: with `wrap` it breaks
+// within the column instead of overflowing (its scrollWidth stays within the
+// box), fixing the "capability leaks into the next column" bug.
+export const WrapLongLabel: Story = {
+  render: () => (
+    <html.div style={layoutStyles.narrowCol}>
+      <Tag size="sm" wrap>
+        {LONG_CAP}
+      </Tag>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const tag = canvas.getByText(LONG_CAP)
+    // Content wraps inside the tag; the tag doesn't spill past its column.
+    await expect(tag.scrollWidth).toBeLessThanOrEqual(tag.clientWidth + 2)
+  },
+}
+
 export const AllVariants: Story = {
   render: () => (
     <html.div style={layoutStyles.stack}>

package/src/components/Tag/Tag.tsx

@@ -16,6 +16,14 @@ interface TagProps {
   /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
   onRemove?: () => void
   disabled?: boolean
+  /**
+   * Allow the label to wrap / break instead of staying on one line. Tags are
+   * `white-space: nowrap` by default (they read as pills); set this for long
+   * identifier-style values (e.g. `lldap.group.member.remove`) sitting in a
+   * constrained column, so they break within their cell instead of leaking
+   * into the next one.
+   */
+  wrap?: boolean
   children: ReactNode
 }
 
@@ -36,6 +44,7 @@ export function Tag({
   removable: removableProp,
   onRemove: onRemoveProp,
   disabled: disabledProp = false,
+  wrap = false,
   children,
 }: TagProps) {
   const group = useTagGroup()
@@ -133,6 +142,7 @@ export function Tag({
         removable && removableSizeMap[size],
         styles[variant],
         disabled && styles.disabled,
+        wrap && styles.wrap,
       ]}
     >
       {tagContent}

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

@@ -13,6 +13,7 @@ export const styles = css.create({
     lineHeight: 1,
     borderRadius: 4,
     whiteSpace: 'nowrap',
+    minWidth: 0,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
@@ -47,6 +48,17 @@ export const styles = css.create({
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
   },
+  // Opt-in wrapping for long identifier-style labels. Overrides the base
+  // nowrap so the text breaks within its container (e.g. a table cell)
+  // instead of overflowing into the next column. `anywhere` also lets the
+  // tag shrink below its content's intrinsic width so a flex/grid parent can
+  // actually give it a narrow track.
+  wrap: {
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
+    lineHeight: 1.35,
+    textAlign: 'start',
+  },
   // Reduce right padding when removable to keep visual balance with the button
   removableMd: {
     paddingRight: spacing.sm,

package/src/components/VirtualTable/VirtualTable.stories.tsx

@@ -1,8 +1,14 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn, waitFor} from 'storybook/test'
 import {createColumnHelper} from '@tanstack/react-table'
+import {css, html} from 'react-strict-dom'
 import {VirtualTable} from './VirtualTable'
 
+const storyStyles = css.create({
+  // Phone-width wrapper: below VirtualTable's 640px stackBelow default.
+  narrow: {width: 400},
+})
+
 interface Item {
   id: string
   name: string
@@ -87,3 +93,26 @@ export const ScrollReportsPage: Story = {
     await expect(maxPage).toBeGreaterThan(1)
   },
 }
+
+// In a narrow (phone-width) container the table cards up: header hides and
+// each row becomes a label/value card, like Table's stack mode.
+export const StacksOnNarrow: Story = {
+  args: {data: makeData(6), onRowClick: fn(), rowLabel: (r: Item) => r.name},
+  decorators: [
+    (Story) => (
+      <html.div style={storyStyles.narrow}>
+        <Story />
+      </html.div>
+    ),
+  ],
+  play: async ({canvas}) => {
+    // Header group not rendered → no column headers in the a11y tree.
+    await waitFor(async () => {
+      await expect(canvas.queryAllByRole('columnheader')).toHaveLength(0)
+    })
+    // Each card surfaces the column labels ('Name'/'Value') next to values.
+    await expect(canvas.getAllByText('Name').length).toBe(6)
+    await expect(canvas.getByText('Row 0')).toBeInTheDocument()
+    await expect(canvas.getByText('Row 5')).toBeInTheDocument()
+  },
+}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState, type ReactNode} from 'react'
+import {useEffect, useLayoutEffect, useRef, useState, type ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {
   useReactTable,
@@ -11,8 +11,12 @@ import {
   type Row,
 } from '@tanstack/react-table'
 import {useVirtualizer} from '@tanstack/react-virtual'
+import {breakpointsPx} from '@duro-app/tokens/tokens/breakpoints.css'
 import {styles} from './styles.css'
 
+// Measure + commit before paint on the client; no-op-safe on the server.
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
 export interface VirtualTableRange {
   /** 1-based index of the first visible row (0 when empty). */
   from: number
@@ -56,6 +60,16 @@ interface VirtualTableProps<TData> {
   maxHeight?: number | string
   /** Render every row (no windowing) at or below this count. Default 150. */
   virtualizeThreshold?: number
+  /**
+   * Below this container width (px) the table cards up: the header hides and
+   * each row becomes a label/value card (like Table's stack mode). Defaults to
+   * the shared `sm` breakpoint (640px) so every table cards up at the same
+   * line. Cards disable windowing (variable heights), so keep phone lists
+   * reasonably short. Set `responsive={false}` to disable entirely.
+   */
+  stackBelow?: number
+  /** Opt out of the card-up-on-narrow behavior. Default true. */
+  responsive?: boolean
   emptyLabel?: ReactNode
 }
 
@@ -84,6 +98,8 @@ export function VirtualTable<TData>({
   estimateRowHeight = 44,
   maxHeight = '70vh',
   virtualizeThreshold = 150,
+  stackBelow = breakpointsPx.sm,
+  responsive = true,
   emptyLabel,
 }: VirtualTableProps<TData>) {
   // Support both controlled sorting (SortChip in the caller) and standalone use.
@@ -102,7 +118,35 @@ export function VirtualTable<TData>({
   })
 
   const rows = table.getRowModel().rows
-  const virtualize = rows.length > virtualizeThreshold
+
+  // Card-up on narrow containers. Flex cells truncate rather than overflow, so
+  // there's no content-overflow signal to measure (as in Table) — we use a
+  // deliberate phone-width breakpoint. Cards render every row (no windowing),
+  // so `virtualize` is forced off while stacked.
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const [stacked, setStacked] = useState(false)
+  useIsoLayoutEffect(() => {
+    if (!responsive) {
+      setStacked(false)
+      return
+    }
+    const el = wrapRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const apply = (width: number) => {
+      if (width > 0) setStacked(width < stackBelow)
+    }
+    apply(el.getBoundingClientRect().width)
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const box = entry.contentBoxSize?.[0]
+      apply(box ? box.inlineSize : entry.contentRect.width)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [responsive, stackBelow])
+
+  const virtualize = rows.length > virtualizeThreshold && !stacked
 
   const scrollRef = useRef<HTMLDivElement>(null)
   const rv = useVirtualizer({
@@ -174,82 +218,132 @@ export function VirtualTable<TData>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [curPage, virtualize])
 
+  // Stack-mode label for a column: explicit meta override, else the string
+  // header, else nothing (value renders label-less, e.g. an actions column).
+  const columnStackLabel = (columnDef: {
+    header?: unknown
+    meta?: {stackLabel?: string; label?: string}
+  }): string => {
+    const meta = columnDef.meta
+    if (typeof meta?.stackLabel === 'string') return meta.stackLabel
+    if (typeof meta?.label === 'string') return meta.label
+    return typeof columnDef.header === 'string' ? columnDef.header : ''
+  }
+
   const renderRow = (
     row: Row<TData>,
     index: number,
     positioned?: ReturnType<typeof styles.rowAbsolute>,
     measureRef?: (node: Element | null) => void,
-  ) => (
-    <html.div
-      key={row.id}
-      ref={measureRef}
-      data-index={index}
-      role="row"
-      aria-label={rowLabel?.(row.original)}
-      onClick={onRowClick ? () => onRowClick(row.original) : undefined}
-      style={[styles.row, Boolean(onRowClick) && styles.rowClickable, positioned]}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <html.div
-          key={cell.id}
-          role="cell"
-          style={[styles.cell, styles.cellFlex(cell.column.getSize())]}
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </html.div>
-      ))}
-    </html.div>
-  )
+  ) =>
+    stacked ? (
+      <html.div
+        key={row.id}
+        role="row"
+        aria-label={rowLabel?.(row.original)}
+        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+        style={[styles.stackRow, Boolean(onRowClick) && styles.rowClickable]}
+      >
+        {row.getVisibleCells().map((cell) => {
+          const lbl = columnStackLabel(cell.column.columnDef)
+          return (
+            <html.div key={cell.id} role="cell" style={styles.stackCell}>
+              {lbl ? <html.span style={styles.stackCellLabel}>{lbl}</html.span> : null}
+              <html.div style={styles.stackCellValue}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </html.div>
+            </html.div>
+          )
+        })}
+      </html.div>
+    ) : (
+      <html.div
+        key={row.id}
+        ref={measureRef}
+        data-index={index}
+        role="row"
+        aria-label={rowLabel?.(row.original)}
+        onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+        style={[styles.row, Boolean(onRowClick) && styles.rowClickable, positioned]}
+      >
+        {row.getVisibleCells().map((cell) => (
+          <html.div
+            key={cell.id}
+            role="cell"
+            style={[styles.cell, styles.cellFlex(cell.column.getSize())]}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </html.div>
+        ))}
+      </html.div>
+    )
 
   const label =
     rangeLabel?.(range) ?? (rows.length ? `${range.from}–${range.to} / ${range.total}` : '')
 
   return (
-    <html.div style={styles.wrap}>
+    <html.div ref={wrapRef} style={styles.wrap}>
       <html.div
         ref={scrollRef}
         role="table"
-        style={[styles.scroll, virtualize && styles.scrollMax(maxHeight)]}
+        style={[
+          stacked ? styles.stackScroll : styles.scroll,
+          virtualize && styles.scrollMax(maxHeight),
+        ]}
       >
-        <html.div role="rowgroup" style={styles.head}>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <html.div key={headerGroup.id} role="row" style={styles.headRow}>
-              {headerGroup.headers.map((header) => {
-                const col = header.column
-                const sorted = col.getIsSorted()
-                return (
-                  <html.div
-                    key={header.id}
-                    role="columnheader"
-                    aria-sort={
-                      sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : undefined
-                    }
-                    onClick={col.getCanSort() ? col.getToggleSortingHandler() : undefined}
-                    style={[
-                      styles.headCell,
-                      col.getCanSort() && styles.headCellSortable,
-                      styles.cellFlex(header.getSize()),
-                    ]}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(col.columnDef.header, header.getContext())}
-                    {sorted ? (
-                      <html.span style={styles.sortMark}>{sorted === 'asc' ? '↑' : '↓'}</html.span>
-                    ) : null}
-                  </html.div>
-                )
-              })}
-            </html.div>
-          ))}
-        </html.div>
+        {stacked ? null : (
+          <html.div role="rowgroup" style={styles.head}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <html.div key={headerGroup.id} role="row" style={styles.headRow}>
+                {headerGroup.headers.map((header) => {
+                  const col = header.column
+                  const sorted = col.getIsSorted()
+                  return (
+                    <html.div
+                      key={header.id}
+                      role="columnheader"
+                      aria-sort={
+                        sorted === 'asc'
+                          ? 'ascending'
+                          : sorted === 'desc'
+                            ? 'descending'
+                            : undefined
+                      }
+                      onClick={col.getCanSort() ? col.getToggleSortingHandler() : undefined}
+                      style={[
+                        styles.headCell,
+                        col.getCanSort() && styles.headCellSortable,
+                        styles.cellFlex(header.getSize()),
+                      ]}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(col.columnDef.header, header.getContext())}
+                      {sorted ? (
+                        <html.span style={styles.sortMark}>
+                          {sorted === 'asc' ? '↑' : '↓'}
+                        </html.span>
+                      ) : null}
+                    </html.div>
+                  )
+                })}
+              </html.div>
+            ))}
+          </html.div>
+        )}
 
         {rows.length === 0 ? (
           <html.div style={styles.empty}>{emptyLabel}</html.div>
         ) : (
           <html.div
             role="rowgroup"
-            style={virtualize ? styles.bodyTotal(rv.getTotalSize()) : undefined}
+            style={
+              stacked
+                ? styles.stackBody
+                : virtualize
+                  ? styles.bodyTotal(rv.getTotalSize())
+                  : undefined
+            }
           >
             {virtualize
               ? vItems.map((vi) =>

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

@@ -105,6 +105,49 @@ export const styles = css.create({
     flexBasis: 0,
     minWidth: 0,
   }),
+  // --- Stack (card) mode: narrow containers ---
+  // The scroll frame drops its border/background so each row card stands on
+  // its own; windowing is off in this mode so no capped viewport.
+  stackScroll: {
+    position: 'relative',
+    width: '100%',
+    backgroundColor: 'transparent',
+  },
+  stackBody: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+  },
+  stackRow: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.xs,
+    width: '100%',
+    padding: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    backgroundColor: colors.bgCard,
+  },
+  stackCell: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 2fr',
+    gap: spacing.sm,
+    alignItems: 'center',
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+  },
+  stackCellLabel: {
+    color: colors.textMuted,
+    fontWeight: typography.fontWeightMedium,
+    fontSize: typography.fontSizeXs,
+  },
+  stackCellValue: {
+    minWidth: 0,
+    overflowWrap: 'break-word',
+  },
   empty: {
     paddingTop: spacing.xl,
     paddingBottom: spacing.xl,