chore: remove container class and style tweaks for status finding badge

app/(prowler)/compliance/page.tsx

@@ -92,7 +92,7 @@ const SSRComplianceGrid = async ({
   }
 
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
       {compliancesData.data.map((compliance: ComplianceOverviewData) => {
         const { attributes } = compliance;
         const {

app/(prowler)/layout.tsx

@@ -46,7 +46,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           <div className="flex h-dvh items-center justify-center overflow-hidden">
             <SidebarWrap />
-            <main className="no-scrollbar container mb-auto h-full flex-1 flex-col overflow-y-auto p-4">
+            <main className="no-scrollbar mb-auto h-full flex-1 flex-col overflow-y-auto px-6 py-4 xl:px-10">
               {children}
               <Toaster />
             </main>

components/findings/table/column-findings.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
+import { useSearchParams } from "next/navigation";
 
 import { DataTableRowDetails } from "@/components/findings/table";
-import { PlusIcon } from "@/components/icons";
+import { InfoIcon } from "@/components/icons";
 import { TriggerSheet } from "@/components/ui/sheet";
 import {
   DataTableColumnHeader,
@@ -15,7 +16,6 @@ import { FindingProps } from "@/types";
 import { DataTableRowActions } from "./data-table-row-actions";
 
 const getFindingsData = (row: { original: FindingProps }) => {
-  console.log(row.original, "finding");
   return row.original;
 };
 
@@ -27,7 +27,6 @@ const getResourceData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["resource"]["attributes"],
 ) => {
-  // console.log(row.original, "resource");
   return (
     row.original.relationships?.resource?.attributes?.[field] ||
     `No ${field} found in resource`
@@ -38,7 +37,6 @@ const getProviderData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["provider"]["attributes"],
 ) => {
-  // console.log(row.original, "provider");
   return (
     row.original.relationships?.provider?.attributes?.[field] ||
     `No ${field} found in provider`
@@ -49,7 +47,6 @@ const getScanData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["scan"]["attributes"],
 ) => {
-  // console.log(row.original, "scan");
   return (
     row.original.relationships?.scan?.attributes?.[field] ||
     `No ${field} found in scan`
@@ -151,14 +148,23 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
     id: "moreInfo",
     header: "Details",
     cell: ({ row }) => {
+      const searchParams = useSearchParams();
+      const findingId = searchParams.get("id");
+      const isOpen = findingId === row.original.id;
       return (
-        <TriggerSheet
-          triggerComponent={<PlusIcon />}
-          title="Finding Details"
-          description="View the finding details"
-        >
-          <DataTableRowDetails finding={getFindingsData(row)} />
-        </TriggerSheet>
+        <div className="flex justify-center">
+          <TriggerSheet
+            triggerComponent={<InfoIcon className="text-primary" size={16} />}
+            title="Finding Details"
+            description="View the finding details"
+            defaultOpen={isOpen}
+          >
+            <DataTableRowDetails
+              entityId={row.original.id}
+              findingDetails={row.original}
+            />
+          </TriggerSheet>
+        </div>
       );
     },
   },

components/ui/sheet/trigger-sheet.tsx

@@ -27,7 +27,7 @@ export function TriggerSheet({
       <SheetTrigger className="flex items-center gap-2">
         {triggerComponent}
       </SheetTrigger>
-      <SheetContent className="my-4 max-h-[calc(100vh-2rem)] max-w-[95vw] rounded-l-xl pt-10 md:my-8 md:max-h-[calc(100vh-4rem)] md:max-w-[55vw]">
+      <SheetContent className="my-4 max-h-[calc(100vh-2rem)] max-w-[95vw] overflow-y-auto rounded-l-xl pt-10 md:my-8 md:max-h-[calc(100vh-4rem)] md:max-w-[55vw]">
         <SheetHeader>
           <SheetTitle className="sr-only">{title}</SheetTitle>
           <SheetDescription className="sr-only">{description}</SheetDescription>

components/ui/table/status-finding-badge.tsx

@@ -25,7 +25,7 @@ export const StatusFindingBadge = ({
 
   return (
     <Chip
-      className="gap-1 border-none px-2 py-4 capitalize text-default-600"
+      className="gap-1 border-none px-2 py-1 capitalize text-default-600"
       size={size}
       variant="flat"
       color={color}