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

audit/divergences/data_table.yml

@@ -4,3 +4,24 @@
   shadcn: "dashboard-01 block: div with four <button>s calling TanStack Table's page setters; disabled ends use the disabled attribute"
   reason: "RubyUI's DataTable is server-driven: paging is a GET answered with HTML and swapped by a Turbo Frame, so links work without JS and can be opened in a new tab. Look and accessible names match the block."
   since: "2026-11-02"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableColumnToggle, property: display, rubyui: inline-flex, shadcn: flex}
+  rubyui: "Columns trigger (RubyUI::Button, inline-flex) sits inside the DropdownMenu and DropdownMenuTrigger wrappers, so it stays inline-flex"
+  shadcn: "dashboard-01 block: the trigger Button (also inline-flex) is a direct child of div.flex, so the browser blockifies it to flex"
+  reason: "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)."
+  since: "2026-11-05"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableRowCheckbox, property: display, rubyui: block, shadcn: flex}
+  rubyui: "Row checkbox is RubyUI::Checkbox, a native <input type=checkbox> (blockified to block inside div.flex)"
+  shadcn: "Base UI Checkbox root is a <span class=\"flex …\"> that centers its indicator"
+  reason: "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."
+  since: "2026-11-05"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableRowCheckbox, property: text-align, rubyui: start, shadcn: left}
+  rubyui: "Native checkbox input: text-align start (the UA default for inputs)"
+  shadcn: "Base UI span: text-align left, inherited from the table cell"
+  reason: "start and left are the same in LTR, and a checkbox input has no text to align."
+  since: "2026-11-05"

audit/fixtures/data_table/rubyui.rb

@@ -44,8 +44,8 @@ def view_template
                     TableRow do
                       TableCell(class: "w-8") { div(class: "flex items-center justify-center") { DataTableRowCheckbox(value: id, label: "Select row") } }
                       TableCell { header }
-                      TableCell(data: {column: "type"}) { Badge(variant: :outline, size: :sm) { type } }
-                      TableCell(data: {column: "status"}) { Badge(variant: :outline, size: :sm) { status } }
+                      TableCell(data: {column: "type"}) { Badge(variant: :outline, class: "px-1.5 text-muted-foreground") { type } }
+                      TableCell(data: {column: "status"}) { Badge(variant: :outline, class: "px-1.5 text-muted-foreground") { status } }
                       TableCell(data: {column: "reviewer"}) { reviewer }
                     end
                   end

gem/lib/ruby_ui/data_table/data_table_toolbar.rb

@@ -9,7 +9,9 @@ def view_template(&)
     private
 
     def default_attrs
-      {class: "flex items-center justify-between gap-2"}
+      # pb-2 on top of DataTable's space-y-4 leaves 24px above the table, as the
+      # gap-6 between the toolbar and the table in shadcn's dashboard-01 block.
+      {class: "flex items-center justify-between gap-2 pb-2"}
     end
   end
 end

gem/test/ruby_ui/data_table_toolbar_test.rb

@@ -8,4 +8,9 @@ def test_renders_div_with_flex_layout_and_children
     assert_match(/<div[^>]*class="[^"]*flex[^"]*"/, output)
     assert_match(/INNER/, output)
   end
+
+  def test_leaves_the_block_gap_above_the_table
+    output = phlex { RubyUI.DataTableToolbar { "INNER" } }
+    assert_match(/<div[^>]*class="[^"]*\bpb-2\b/, output)
+  end
 end

mcp/data/registry/components/data_table.json

@@ -80,7 +80,7 @@
     },
     {
       "path": "data_table_toolbar.rb",
-      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DataTableToolbar < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {class: \"flex items-center justify-between gap-2\"}\n    end\n  end\nend\n"
+      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DataTableToolbar < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      # pb-2 on top of DataTable's space-y-4 leaves 24px above the table, as the\n      # gap-6 between the toolbar and the table in shadcn's dashboard-01 block.\n      {class: \"flex items-center justify-between gap-2 pb-2\"}\n    end\n  end\nend\n"
     }
   ],
   "dependencies": {