feat: ✨ ensure overflow will not appear, and now we use scroll areas

neopromic · Nov 13, 2024 · 2220b45 · 2220b45
1 parent ec7672f
commit 2220b45
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 20 deletions.
diff --git a/app/(authenticated)/dashboard/_components/transactions-pie-chart.tsx b/app/(authenticated)/dashboard/_components/transactions-pie-chart.tsx
@@ -62,7 +62,7 @@ const TransactionsPieChart = ({
   ];
 
   return (
-    <Card className="flex flex-col py-12">
+    <Card className="flex flex-col py-6">
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}

diff --git a/app/(authenticated)/dashboard/page.tsx b/app/(authenticated)/dashboard/page.tsx
@@ -6,6 +6,7 @@ import TransactionsPieChart from "./_components/transactions-pie-chart";
 import GetDashboard from "@/app/_data/get-dashboard";
 import ExpensesPerCategory from "./_components/expenses-per-category";
 import LastTransactions from "./_components/last-transactions";
+import { ScrollArea } from "@/app/_components/ui/scroll-area";
 
 interface HomeProps {
   searchParams: {
@@ -20,7 +21,6 @@ const Home = async ({ searchParams: { month = "1" } }: HomeProps) => {
     redirect("/login");
   }
 
-  // Validação do mês
   const monthNumber = Number(month);
   const isValidMonth = monthNumber >= 1 && monthNumber <= 12;
 
@@ -31,22 +31,26 @@ const Home = async ({ searchParams: { month = "1" } }: HomeProps) => {
   const dashboard = await GetDashboard(monthNumber);
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="grid grid-cols-[2fr,1fr] gap-6">
-        <div className="space-y-6">
-          <div className="flex justify-between">
-            <h1 className="text-2xl font-bold">Dashboard</h1>
-            <TimeSelect defaultValue={month} />
+    <div className="flex h-[calc(100vh-72px)] flex-col gap-6 p-6">
+      <div className="grid h-full grid-cols-[2fr,1fr] gap-6">
+        <ScrollArea className="h-full pr-6">
+          <div className="space-y-6 overflow-hidden">
+            <div className="flex justify-between">
+              <h1 className="text-2xl font-bold">Dashboard</h1>
+              <TimeSelect defaultValue={month} />
+            </div>
+
+            <SummaryCards month={monthNumber.toString()} {...dashboard} />
+
+            <div className="grid grid-cols-3 grid-rows-1 gap-6 overflow-hidden">
+              <TransactionsPieChart {...dashboard} />
+              <ExpensesPerCategory
+                expensesPerCategory={dashboard.totalExpensePerCategory}
+              />
+            </div>
           </div>
-          <SummaryCards month={monthNumber.toString()} {...dashboard} />
+        </ScrollArea>
 
-          <div className="grid grid-cols-3 grid-rows-1 gap-6">
-            <TransactionsPieChart {...dashboard} />
-            <ExpensesPerCategory
-              expensesPerCategory={dashboard.totalExpensePerCategory}
-            />
-          </div>
-        </div>
         <LastTransactions lastTransactions={dashboard.lastTransactions} />
       </div>
     </div>

diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
@@ -17,7 +17,7 @@ export default async function AuthenticatedLayout({
   return (
     <>
       <Header isEnabled />
-      {children}
+      <div className="flex flex-col overflow-hidden">{children}</div>
     </>
   );
 }
diff --git a/app/(authenticated)/transactions/page.tsx b/app/(authenticated)/transactions/page.tsx
@@ -5,6 +5,7 @@ import { transactionsColumns } from "./_columns";
 import AddTransactionButton from "@/app/_components/add-transaction-button";
 import { auth } from "@clerk/nextjs/server";
 import { redirect } from "next/navigation";
+import { ScrollArea } from "@/app/_components/ui/scroll-area";
 
 const TransactionsPage = async () => {
   const { userId } = await auth();
@@ -28,12 +29,14 @@ const TransactionsPage = async () => {
   });
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="h-full space-y-6 overflow-hidden p-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Transações</h1>
         <AddTransactionButton />
       </div>
-      <DataTable columns={transactionsColumns} data={transactions} />
+      <ScrollArea className="h-full pb-12">
+        <DataTable columns={transactionsColumns} data={transactions} />
+      </ScrollArea>
     </div>
   );
 };

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,9 @@ export default function RootLayout({
   return (
     <html lang="pt-BR">
       <ClerkProvider appearance={{ baseTheme: dark }}>
-        <body className={`${mulish.className} dark antialiased`}>
+        <body
+          className={`${mulish.className} dark flex h-full flex-col overflow-hidden antialiased`}
+        >
           {children}
         </body>
       </ClerkProvider>