Skip to content

Commit e5201ee

Browse files
Andres6936Andres6936
committed
Refactor layout components for consistent flex behavior.
Updated multiple components to use `flex` and `flex-1` for layout consistency and better responsiveness. Adjusted `PageContainer`, tables, and page structure to improve alignment and scrolling functionality. Added `.idea/` to `.gitignore` for IDE-specific files.
1 parent 6ab3c5f commit e5201ee

File tree

5 files changed

+63
-55
lines changed

5 files changed

+63
-55
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,5 @@ yarn-error.log*
3333
# typescript
3434
*.tsbuildinfo
3535
next-env.d.ts
36+
37+
.idea/

‎src/app/dashboard/product/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export default async function Page(props: pageProps) {
2929
const key = serialize({ ...searchParams });
3030

3131
return (
32-
<PageContainer>
33-
<div className='space-y-4'>
32+
<PageContainer scrollable={false}>
33+
<div className='flex flex-1 flex-col space-y-4'>
3434
<div className='flex items-start justify-between'>
3535
<Heading
3636
title='Products'

‎src/components/layout/page-container.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ export default function PageContainer({
1212
<>
1313
{scrollable ? (
1414
<ScrollArea className='h-[calc(100dvh-52px)]'>
15-
<div className='h-full p-4 md:px-6'>{children}</div>
15+
<div className='flex flex-1 p-4 md:px-6'>{children}</div>
1616
</ScrollArea>
1717
) : (
18-
<div className='h-full p-4 md:px-6'>{children}</div>
18+
<div className='flex flex-1 p-4 md:px-6'>{children}</div>
1919
)}
2020
</>
2121
);

‎src/components/ui/table/data-table.tsx

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -91,58 +91,64 @@ export function DataTable<TData, TValue>({
9191
});
9292

9393
return (
94-
<div className='space-y-4'>
95-
<ScrollArea className='grid h-[calc(80vh-220px)] rounded-md border md:h-[calc(90dvh-240px)]'>
96-
<Table className='relative'>
97-
<TableHeader>
98-
{table.getHeaderGroups().map((headerGroup) => (
99-
<TableRow key={headerGroup.id}>
100-
{headerGroup.headers.map((header) => (
101-
<TableHead key={header.id}>
102-
{header.isPlaceholder
103-
? null
104-
: flexRender(
105-
header.column.columnDef.header,
106-
header.getContext()
107-
)}
108-
</TableHead>
94+
<div className='flex flex-1 flex-col space-y-4'>
95+
<div className='relative flex flex-1'>
96+
<div className='absolute inset-0 flex overflow-scroll rounded-md border'>
97+
<ScrollArea className='flex flex-1'>
98+
<Table className='relative'>
99+
<TableHeader>
100+
{table.getHeaderGroups().map((headerGroup) => (
101+
<TableRow key={headerGroup.id}>
102+
{headerGroup.headers.map((header) => (
103+
<TableHead key={header.id}>
104+
{header.isPlaceholder
105+
? null
106+
: flexRender(
107+
header.column.columnDef.header,
108+
header.getContext()
109+
)}
110+
</TableHead>
111+
))}
112+
</TableRow>
109113
))}
110-
</TableRow>
111-
))}
112-
</TableHeader>
113-
<TableBody>
114-
{table.getRowModel().rows?.length ? (
115-
table.getRowModel().rows.map((row) => (
116-
<TableRow
117-
key={row.id}
118-
data-state={row.getIsSelected() && 'selected'}
119-
>
120-
{row.getVisibleCells().map((cell) => (
121-
<TableCell key={cell.id}>
122-
{flexRender(
123-
cell.column.columnDef.cell,
124-
cell.getContext()
125-
)}
114+
</TableHeader>
115+
<TableBody>
116+
{table.getRowModel().rows?.length ? (
117+
table.getRowModel().rows.map((row) => (
118+
<TableRow
119+
key={row.id}
120+
data-state={row.getIsSelected() && 'selected'}
121+
>
122+
{row.getVisibleCells().map((cell) => (
123+
<TableCell key={cell.id}>
124+
{flexRender(
125+
cell.column.columnDef.cell,
126+
cell.getContext()
127+
)}
128+
</TableCell>
129+
))}
130+
</TableRow>
131+
))
132+
) : (
133+
<TableRow>
134+
<TableCell
135+
colSpan={columns.length}
136+
className='h-24 text-center'
137+
>
138+
No results.
126139
</TableCell>
127-
))}
128-
</TableRow>
129-
))
130-
) : (
131-
<TableRow>
132-
<TableCell
133-
colSpan={columns.length}
134-
className='h-24 text-center'
135-
>
136-
No results.
137-
</TableCell>
138-
</TableRow>
139-
)}
140-
</TableBody>
141-
</Table>
142-
<ScrollBar orientation='horizontal' />
143-
</ScrollArea>
140+
</TableRow>
141+
)}
142+
</TableBody>
143+
</Table>
144+
145+
<ScrollBar orientation='vertical' />
146+
<ScrollBar orientation='horizontal' />
147+
</ScrollArea>
148+
</div>
149+
</div>
144150

145-
<div className='flex flex-col items-center justify-end gap-2 space-x-2 py-4 sm:flex-row'>
151+
<div className='flex flex-col items-center justify-end gap-2 space-x-2 py-2 sm:flex-row'>
146152
<div className='flex w-full items-center justify-between'>
147153
<div className='flex-1 text-sm text-muted-foreground'>
148154
{totalItems > 0 ? (

‎src/features/overview/components/overview.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { RecentSales } from './recent-sales';
1515

1616
export default function OverViewPage() {
1717
return (
18-
<PageContainer scrollable>
19-
<div className='space-y-2'>
18+
<PageContainer>
19+
<div className='flex flex-1 flex-col space-y-2'>
2020
<div className='flex items-center justify-between space-y-2'>
2121
<h2 className='text-2xl font-bold tracking-tight'>
2222
Hi, Welcome back 👋

0 commit comments

Comments
 (0)