fix(ui): Improve pagination spacing

- Increased top margin from mt-6 to mt-8
- Increased gaps between elements from gap-4 to gap-6
- Better spacing in page size selector
This commit is contained in:
2026-03-06 14:52:45 +01:00
parent fa574586ed
commit 5683fb8d25

View File

@@ -44,14 +44,14 @@ export function CursorPagination({
}; };
return ( return (
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6 pt-6 border-t border-line"> <div className="flex flex-col sm:flex-row items-center justify-between gap-6 mt-8 pt-8 border-t border-line">
{/* Page size selector */} {/* Page size selector */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<span className="text-sm text-muted">Show</span> <span className="text-sm text-muted">Show</span>
<select <select
value={pageSize.toString()} value={pageSize.toString()}
onChange={(e) => changePageSize(Number(e.target.value))} onChange={(e) => changePageSize(Number(e.target.value))}
className="w-20 px-2 py-1.5 text-sm border border-line rounded-lg bg-background text-foreground" className="w-20 px-3 py-2 text-sm border border-line rounded-lg bg-background text-foreground"
> >
{pageSizeOptions.map((size) => ( {pageSizeOptions.map((size) => (
<option key={size} value={size}> <option key={size} value={size}>
@@ -68,7 +68,7 @@ export function CursorPagination({
</div> </div>
{/* Navigation */} {/* Navigation */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
{hasPrevPage && ( {hasPrevPage && (
<Button <Button
variant="secondary" variant="secondary"
@@ -161,14 +161,14 @@ export function OffsetPagination({
}; };
return ( return (
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6 pt-6 border-t border-line"> <div className="flex flex-col sm:flex-row items-center justify-between gap-6 mt-8 pt-8 border-t border-line">
{/* Page size selector */} {/* Page size selector */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
<span className="text-sm text-muted">Show</span> <span className="text-sm text-muted">Show</span>
<select <select
value={pageSize.toString()} value={pageSize.toString()}
onChange={(e) => changePageSize(Number(e.target.value))} onChange={(e) => changePageSize(Number(e.target.value))}
className="w-20 px-2 py-1.5 text-sm border border-line rounded-lg bg-background text-foreground" className="w-20 px-3 py-2 text-sm border border-line rounded-lg bg-background text-foreground"
> >
{pageSizeOptions.map((size) => ( {pageSizeOptions.map((size) => (
<option key={size} value={size}> <option key={size} value={size}>
@@ -185,7 +185,7 @@ export function OffsetPagination({
</div> </div>
{/* Page navigation */} {/* Page navigation */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-2">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"