[Bug Fix] DataTable: shadcn's 24px under the toolbar, and register look differences that render the same

PI
20h ago
+32-4

Related issue

None opened. Follow-up of the shadcn audit on #579.

Description

The DataTable left 16px between the toolbar and the table; shadcn's dashboard-01 block leaves 24px (the toolbar sits in Tabs gap-6). DataTableToolbar now adds pb-2 on top of the root's space-y-4, so the table, rows, summary and pagination land on the same coordinates as shadcn's at 1280×800.

The other two ❌ the audit reported render the same and are now registered with a match in audit/divergences/data_table.yml:

  • Columns trigger display: inline-flex vs flex: same classes; shadcn's button is a flex item and gets blockified, RubyUI's sits inside the DropdownMenu wrappers. Same box.
  • Row checkbox display: block / text-align: start vs the Base UI <span>'s flex / left: the native input has no children or text to lay out. Same 16×16 box.

The RubyUI audit fixture now renders the badges as shadcn's does (px-1.5 text-muted-foreground), which also removes a 1px per row difference.

light
dark

shadcn audit · main 
shadcn audit  ruby-ui/ruby_ui
  base 1fd93db0  head 1fd93db0  shadcn 8a353667
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (light)
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (dark)
✅ Theme  neutral tokens match shadcn
DataTable  (ref: bases/base/blocks/dashboard-01/components/data-table.tsx + style-vega.css @ 8a353667)
  ❌ Look       display: inline-flex
               vega: display: flex
               DataTableColumnToggle — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ❌ Look       column-gap: normal; display: inline-block; gap: normal; padding-bottom: 4px; padding-right: 32px; padding-top: 4px; row-gap: normal; text-align: start
               vega: column-gap: 6px; display: flex; gap: 6px; padding-bottom: 8px; padding-right: 8px; padding-top: 8px; row-gap: 6px; text-align: center
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ❌ Look       display: block; text-align: start
               vega: display: flex; text-align: left
               DataTableRowCheckbox — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ⏸ Look       properties: font-family, width
               DataTableColumnToggle, DropdownMenuContent, DataTablePerPageSelect, DataTableRowCheckbox — explained by environment diff: font
  ⚠️ ARIA       aria-expanded: (none); aria-haspopup: (none); snapshot: only here: - combobox "Rows per page": |   - option "5" |   - option "10" [selected] |   - option "25" |   - option "50"
               shadcn: aria-expanded: false; aria-haspopup: listbox; snapshot: only here: - combobox "Rows per page": "10"
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ accessibility tree (shadcn-audit collect)
  ✅ ARIA       DataTableColumnToggle, DropdownMenuContent, DataTableRowCheckbox: accessibility tree matches
               ↳ accessibility tree (shadcn-audit collect)
  ❌ Look       DataTable root space-y-4: 16px between the toolbar and the table
               vega: Tabs gap-6 around the toolbar: 24px between the toolbar and the table
               Measured at 1280x800: table top at y=72 vs y=80. The DataTable part maps to null, so collect doesn't grade it.
               ↳ bases/base/blocks/dashboard-01/components/data-table.tsx:434
shadcn audit · this PR 
shadcn audit  ruby-ui/ruby_ui
  base 1fd93db0  head ceffe44d  shadcn 8a353667
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (light)
⚠️ Environment  font: "Inter Variable", "system-ui", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "sans-serif" vs "Inter Variable", sans-serif (dark)
✅ Theme  neutral tokens match shadcn
DataTable  (ref: bases/base/blocks/dashboard-01/components/data-table.tsx + style-vega.css @ 8a353667)
  ✅ Look       display: inline-flex — intentional
               DataTableColumnToggle — Same classes on both sides; only the parent differs. RubyUI's DropdownMenu needs its wrapper elements for the Stimulus controller and the popover. The trigger's box is identical (1142.9, 24, 113.1x32 at 1280x800).
               ↳ audit/divergences/data_table.yml
  ❌ Look       column-gap: normal; display: inline-block; gap: normal; padding-bottom: 4px; padding-right: 32px; padding-top: 4px; row-gap: normal; text-align: start
               vega: column-gap: 6px; display: flex; gap: 6px; padding-bottom: 8px; padding-right: 8px; padding-top: 8px; row-gap: 6px; text-align: center
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ computed styles (shadcn-audit collect)
  ✅ Look       display: block — intentional
               DataTableRowCheckbox — The native input draws its check itself and has no children to lay out, so display flex would change nothing; same 16x16 box and x position on both sides.
               ↳ audit/divergences/data_table.yml
  ✅ Look       text-align: start — intentional
               DataTableRowCheckbox — start and left are the same in LTR, and a checkbox input has no text to align.
               ↳ audit/divergences/data_table.yml
  ⏸ Look       properties: font-family, width
               DataTableColumnToggle, DropdownMenuContent, DataTablePerPageSelect, DataTableRowCheckbox — explained by environment diff: font
  ⚠️ ARIA       aria-expanded: (none); aria-haspopup: (none); snapshot: only here: - combobox "Rows per page": |   - option "5" |   - option "10" [selected] |   - option "25" |   - option "50"
               shadcn: aria-expanded: false; aria-haspopup: listbox; snapshot: only here: - combobox "Rows per page": "10"
               DataTablePerPageSelect — closed/light, open/light, focus/light, after-esc/light, closed/dark, open/dark, focus/dark, after-esc/dark
               ↳ accessibility tree (shadcn-audit collect)
  ✅ ARIA       DataTableColumnToggle, DropdownMenuContent, DataTableRowCheckbox: accessibility tree matches
               ↳ accessibility tree (shadcn-audit collect)
  ✅ Look       DataTableToolbar pb-2 on top of space-y-4: 24px between the toolbar and the table
               Measured at 1280x800: table box, rows, summary and pagination at the same coordinates on both sides (table top y=80, summary y=257.5).
               ↳ bases/base/blocks/dashboard-01/components/data-table.tsx:434

The per-page select ❌ in both lists is fixed by #579.

Testing instructions

  • cd gem && bundle exec rake → 776 runs, 0 failures, StandardRB clean.
  • /docs/data_table: the table starts 24px below the toolbar.
  • cd audit && bundle exec exe/shadcn-audit collect data_table … → the Columns trigger and row checkbox lines come out ✅ intentional.

🤖 Generated with Claude Code

Summary by cubic

Fixes the DataTable toolbar gap so the table lands 24px below the toolbar, matching shadcn's dashboard-01 block at 1280×800, and registers three look differences that render identically as intentional divergences in the audit.

  • DataTableToolbar gains pb-2 on top of DataTable's space-y-4; the gap was previously 16px.
  • Records the Columns trigger's inline-flex and the row checkbox's block/start as intentional matches in audit/divergences/data_table.yml; the resulting boxes are identical on both sides.
  • The audit fixture now renders badges with px-1.5 text-muted-foreground, matching shadcn's classes and removing a 1px-per-row difference.