soconnor/beenvoice-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove extra bottom padding from filter and pagination bars

Browse Source 
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>
This commit is contained in:
Sean O'Connor
2026-05-10 03:10:37 -04:00
parent 7819e438df
commit 47a0ccc88c
1 changed files with 125 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/data/data-table.tsx
+12 -20
View File
@@ -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">
<CardContent className="px-3 py-0">
<div className="flex items-center gap-2">
<Card className="bg-card border-border border">
<div className="flex items-center gap-2 px-3 py-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">
<CardContent className="flex items-center justify-between gap-3 px-3 py-0">
<Card className="bg-primary/5 border-primary/20 border">
<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">
<CardContent className="px-3 py-0">
<div className="flex items-center justify-between gap-2">
<Card className="bg-card border-border border">
<div className="flex items-center justify-between gap-2 px-3 py-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">
<CardContent className="px-3 py-0">
<div className="flex items-center gap-2">
<Card className="bg-card border-border border">
<div className="flex items-center gap-2 px-3 py-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">
<CardContent className="px-3 py-0">
<div className="flex items-center justify-between gap-2">
<Card className="bg-card border-border border">
<div className="flex items-center justify-between gap-2 px-3 py-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>
);