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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user