From 256dcf090678cfefd0dae7a89452ff88d0c0768d Mon Sep 17 00:00:00 2001
From: Cheewye <cristianbarnes@gmail.com>
Date: Thu, 12 Feb 2026 20:17:56 -0300
Subject: [PATCH] fix(sap): Global Audit single scroll + progressive disclosure

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../auditoria/GlobalAuditDashboard.tsx        | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/auditoria/GlobalAuditDashboard.tsx b/frontend/src/components/auditoria/GlobalAuditDashboard.tsx
index c656194a4..c62203d63 100644
--- a/frontend/src/components/auditoria/GlobalAuditDashboard.tsx
+++ b/frontend/src/components/auditoria/GlobalAuditDashboard.tsx
@@ -602,9 +602,9 @@ export const GlobalAuditDashboard: React.FC = () => {
   ];
 
   return (
-    <div className="min-h-screen w-full bg-[var(--bg)] text-[var(--text)] flex flex-col">
+    <div className="h-[100dvh] w-full bg-[var(--bg)] text-[var(--text)] flex flex-col overflow-hidden">
       {/* Header above the audit dashboard */}
-      <div className="flex items-center justify-between px-3 py-1 border-b border-[var(--border)] bg-[var(--panel)] sticky top-0 z-50">
+      <div className="flex items-center justify-between px-3 py-1 border-b border-[var(--border)] bg-[var(--panel)] sticky top-0 z-50 shrink-0">
         <div className="flex flex-col leading-tight">
           <span className="text-xs text-[var(--muted)]">
             {auditCopy.header.monitoring}
@@ -632,7 +632,8 @@ export const GlobalAuditDashboard: React.FC = () => {
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 p-4 w-full">
+      <div className="flex-1 min-h-0 overflow-y-auto">
+      <div className="flex flex-col gap-4 p-4 w-full pb-24">
         {/* Button to open legacy dashboard (local dev only) */}
       <div className="flex flex-wrap gap-2 bg-[var(--panel)] border border-[var(--border)] rounded-xl p-2">
         {tabs.map((tab) => (
@@ -863,6 +864,17 @@ export const GlobalAuditDashboard: React.FC = () => {
             )}
           </details>
 
+          <details className="group bg-[var(--panel-2)] border border-[var(--border)] rounded-2xl p-6 space-y-4">
+            <summary className="cursor-pointer list-none w-full rounded-xl border border-[var(--border)] bg-[var(--panel)] px-4 py-3 text-[var(--text)] hover:bg-[var(--panel-2)] transition-colors">
+              <span className="flex items-center gap-3">
+                <span className="inline-flex h-6 w-6 items-center justify-center text-xl leading-none transition-transform duration-200 group-open:rotate-90">
+                  ▶
+                </span>
+                <span className="text-base font-semibold group-open:hidden">More details (click to expand)</span>
+                <span className="hidden text-base font-semibold group-open:inline">Hide details</span>
+              </span>
+            </summary>
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 mt-4">
           <details className="bg-[var(--panel-2)] border border-[var(--border)] rounded-2xl p-6 space-y-4">
             <summary className="cursor-pointer list-none text-lg font-semibold text-[var(--text)]">
               {auditCopy.identity.title}
@@ -1045,6 +1057,9 @@ export const GlobalAuditDashboard: React.FC = () => {
             </div>
           </details>
 
+            </div>
+          </details>
+
         </div>
         </>
       )}
@@ -1477,6 +1492,7 @@ export const GlobalAuditDashboard: React.FC = () => {
       )}
       </div>
       </div>
+      </div>
     </div>
   );
 };