style: scroll data table instead of page

This commit is contained in:
zhom
2025-07-04 02:36:56 +04:00
parent eda83cf439
commit 51983bf3a5
3 changed files with 7 additions and 6 deletions
+1 -1
View File
@@ -24,7 +24,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden`}
>
<CustomThemeProvider>
<TooltipProvider>{children}</TooltipProvider>
+3 -2
View File
@@ -30,6 +30,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Table,
TableBody,
@@ -510,7 +511,7 @@ export function ProfilesDataTable({
return (
<>
<div className="rounded-md border">
<ScrollArea className="h-[400px] rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
@@ -559,7 +560,7 @@ export function ProfilesDataTable({
)}
</TableBody>
</Table>
</div>
</ScrollArea>
<Dialog
open={profileToRename !== null}
+3 -3
View File
@@ -8,11 +8,11 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
className="overflow-x-auto relative w-full"
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
className={cn("w-full text-sm caption-bottom", className)}
{...props}
/>
</div>
@@ -98,7 +98,7 @@ function TableCaption({
return (
<caption
data-slot="table-caption"
className={cn("text-muted-foreground mt-4 text-sm", className)}
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
);