fix: remove extra bottom padding from filter and pagination bars

CardContent defaults to px-5 pb-4. Tailwind's CSS cascade means pb-4
always wins over the py-0 override, leaving 16px of phantom bottom
padding on all thin toolbar cards. Replaced CardContent with plain divs
carrying the intended py-2 px-3 directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/data/data-table.tsx

@@ -29,7 +29,7 @@ import {
 import * as React from "react";
 
 import { Button } from "~/components/ui/button";
-import { Card, CardContent } from "~/components/ui/card";
+import { Card } from "~/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -231,9 +231,8 @@ export function DataTable<TData, TValue>({
 
       {/* Filter Bar Card */}
       {(showSearch || filterableColumns.length > 0 || showColumnVisibility) && (
-        <Card className="bg-card border-border border py-2">
+        <Card className="bg-card border-border border">
-          <CardContent className="px-3 py-0">
+          <div className="flex items-center gap-2 px-3 py-2">
-            <div className="flex items-center gap-2">
             {showSearch && (
               <div className="relative min-w-0 flex-1">
                 <Search className="text-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
@@ -332,14 +331,13 @@ export function DataTable<TData, TValue>({
               </DropdownMenu>
             )}
           </div>
-          </CardContent>
         </Card>
       )}
 
       {/* Selection Toolbar */}
       {selectionActions && table.getSelectedRowModel().rows.length > 0 && (
-        <Card className="bg-primary/5 border-primary/20 border py-2">
+        <Card className="bg-primary/5 border-primary/20 border">
-          <CardContent className="flex items-center justify-between gap-3 px-3 py-0">
+          <div className="flex items-center justify-between gap-3 px-3 py-2">
             <span className="text-foreground text-sm font-medium">
               {table.getSelectedRowModel().rows.length} selected
             </span>
@@ -349,7 +347,7 @@ export function DataTable<TData, TValue>({
                 () => table.resetRowSelection(),
               )}
             </div>
-          </CardContent>
+          </div>
         </Card>
       )}
 
@@ -435,9 +433,8 @@ export function DataTable<TData, TValue>({
 
       {/* Pagination Bar Card */}
       {showPagination && (
-        <Card className="bg-card border-border border py-2">
+        <Card className="bg-card border-border border">
-          <CardContent className="px-3 py-0">
+          <div className="flex items-center justify-between gap-2 px-3 py-2">
-            <div className="flex items-center justify-between gap-2">
               <div className="flex items-center gap-2">
                 <p className="text-muted-foreground hidden text-xs sm:inline sm:text-sm">
                   {table.getFilteredRowModel().rows.length === 0
@@ -538,7 +535,6 @@ export function DataTable<TData, TValue>({
                 </Button>
               </div>
           </div>
-          </CardContent>
         </Card>
       )}
     </div>
@@ -596,13 +592,11 @@ export function DataTableSkeleton({
   return (
     <div className="space-y-4">
       {/* Filter bar skeleton */}
-      <Card className="bg-card border-border border py-2">
+      <Card className="bg-card border-border border">
-        <CardContent className="px-3 py-0">
+        <div className="flex items-center gap-2 px-3 py-2">
-          <div className="flex items-center gap-2">
           <div className="bg-muted/30 h-9 w-full flex-1 animate-pulse sm:max-w-sm"></div>
           <div className="bg-muted/30 h-9 w-24 animate-pulse"></div>
         </div>
-        </CardContent>
       </Card>
 
       {/* Table skeleton */}
@@ -667,9 +661,8 @@ export function DataTableSkeleton({
       </Card>
 
       {/* Pagination skeleton */}
-      <Card className="bg-card border-border border py-2">
+      <Card className="bg-card border-border border">
-        <CardContent className="px-3 py-0">
+        <div className="flex items-center justify-between gap-2 px-3 py-2">
-          <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <div className="bg-muted/30 h-4 w-20 animate-pulse rounded text-xs sm:w-32 sm:text-sm"></div>
             <div className="bg-muted/30 h-8 w-[70px] animate-pulse rounded"></div>
@@ -683,7 +676,6 @@ export function DataTableSkeleton({
             ))}
           </div>
         </div>
-        </CardContent>
       </Card>
     </div>
   );