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 ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden`}
> >
<CustomThemeProvider> <CustomThemeProvider>
<TooltipProvider>{children}</TooltipProvider> <TooltipProvider>{children}</TooltipProvider>
+3 -2
View File
@@ -30,6 +30,7 @@ import {
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { ScrollArea } from "@/components/ui/scroll-area";
import { import {
Table, Table,
TableBody, TableBody,
@@ -510,7 +511,7 @@ export function ProfilesDataTable({
return ( return (
<> <>
<div className="rounded-md border"> <ScrollArea className="h-[400px] rounded-md border">
<Table> <Table>
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
@@ -559,7 +560,7 @@ export function ProfilesDataTable({
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </ScrollArea>
<Dialog <Dialog
open={profileToRename !== null} open={profileToRename !== null}
+3 -3
View File
@@ -8,11 +8,11 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
return ( return (
<div <div
data-slot="table-container" data-slot="table-container"
className="relative w-full overflow-x-auto" className="overflow-x-auto relative w-full"
> >
<table <table
data-slot="table" data-slot="table"
className={cn("w-full caption-bottom text-sm", className)} className={cn("w-full text-sm caption-bottom", className)}
{...props} {...props}
/> />
</div> </div>
@@ -98,7 +98,7 @@ function TableCaption({
return ( return (
<caption <caption
data-slot="table-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} {...props}
/> />
); );