From 52e21a020ecef75c234fa78f1cc2c8b6c17c9a56 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 19 Aug 2024 16:40:12 +0200
Subject: [PATCH] feat: add container class to fit all resolutions

---
 app/(prowler)/layout.tsx        |  4 ++--
 app/(prowler)/page.tsx          | 12 ++++++------
 app/(prowler)/services/page.tsx |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/(prowler)/layout.tsx b/app/(prowler)/layout.tsx
index 0faab3f593..b30817c0ba 100644
--- a/app/(prowler)/layout.tsx
+++ b/app/(prowler)/layout.tsx
@@ -44,9 +44,9 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="flex items-center h-dvh w-full justify-center overflow-hidden">
+          <div className="flex items-center h-dvh justify-center overflow-hidden">
             <SidebarWrap />
-            <main className="w-full h-full flex-1 flex-col p-4 mb-auto overflow-y-auto">
+            <main className="container h-full flex-1 flex-col p-4 mb-auto overflow-y-auto">
               {children}
               <Toaster />
             </main>
diff --git a/app/(prowler)/page.tsx b/app/(prowler)/page.tsx
index 2c2c286166..9577693ca8 100644
--- a/app/(prowler)/page.tsx
+++ b/app/(prowler)/page.tsx
@@ -1,6 +1,6 @@
 import { Spacer } from "@nextui-org/react";
 
-import { StatusChart } from "@/components/charts";
+import { SeverityChart, StatusChart } from "@/components/charts";
 import { FilterControls } from "@/components/filters";
 import { AttackSurface } from "@/components/overview";
 import { Header } from "@/components/ui";
@@ -15,20 +15,20 @@ export default function Home() {
       <Spacer y={10} />
       <div className="grid grid-cols-12 gap-4">
         <CustomBox
-          preTitle={"Status"}
-          className="col-span-12 md:col-span-8 xl:col-span-5 3xl:col-span-4"
+          preTitle={"Findings by Status"}
+          className="col-span-12 md:col-span-8 xl:col-span-5"
         >
           <StatusChart />
         </CustomBox>
         <CustomBox
-          preTitle={"Severity"}
+          preTitle={"Findings by Severity"}
           className="col-span-12 md:col-span-4 xl:col-span-3"
         >
-          <p>hi hi</p>
+          <SeverityChart />
         </CustomBox>
         <CustomBox
           preTitle={"Attack Surface"}
-          className="col-span-12 sm:col-span-12 xl:col-span-4 3xl:col-span-5"
+          className="col-span-12 sm:col-span-12 xl:col-span-4"
         >
           <AttackSurface />
         </CustomBox>
diff --git a/app/(prowler)/services/page.tsx b/app/(prowler)/services/page.tsx
index ea675b553f..872d7f3042 100644
--- a/app/(prowler)/services/page.tsx
+++ b/app/(prowler)/services/page.tsx
@@ -33,7 +33,7 @@ const SSRServiceGrid = async ({ searchParams }: searchParamsProps) => {
   if (services?.errors) redirect("/services");
 
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {services.services?.data.map((service: any) => (
         <ServiceCard
           key={service.id}