From 75b8ecc61dbf9e297b3f6bd109287e35c0e76d81 Mon Sep 17 00:00:00 2001
From: jramos <jramos@apophisnetworking.net>
Date: Wed, 11 Mar 2026 13:23:56 -0600
Subject: [PATCH] fix(reporting): full-width layout and in-panel vertical
 scroll

- Reporting page breaks out of max-w-7xl container to use full viewport width
- Table body scrolls within the panel (maxHeight: calc(100vh - 420px)) so you
  no longer need to scroll the entire page to reach the horizontal scrollbar
- Column headers are sticky (position: sticky, top 0) with opaque background
  so they remain visible while scrolling vertically through findings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.js                            | 2 +-
 frontend/src/components/pages/ReportingPage.js | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3779751..5c370ca 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -965,7 +965,7 @@ export default function App() {
       {/* Scanning line effect */}
       <div className="scan-line"></div>
 
-      <div className="max-w-7xl mx-auto relative z-10">
+      <div className={`${currentPage === 'reporting' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
         {/* Header */}
         <div className="mb-8">
           <div className="flex justify-between items-start mb-6">
diff --git a/frontend/src/components/pages/ReportingPage.js b/frontend/src/components/pages/ReportingPage.js
index fd41be7..ba8241e 100644
--- a/frontend/src/components/pages/ReportingPage.js
+++ b/frontend/src/components/pages/ReportingPage.js
@@ -801,7 +801,7 @@ export default function ReportingPage() {
                         <p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>Click Sync to load findings data</p>
                     </div>
                 ) : (
-                    <div style={{ overflowX: 'auto', marginTop: '0.75rem' }}>
+                    <div style={{ overflowX: 'auto', overflowY: 'auto', maxHeight: 'calc(100vh - 420px)', minHeight: '200px', marginTop: '0.75rem' }}>
                         <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem', fontFamily: 'sans-serif' }}>
                             <thead>
                                 <tr style={{ borderBottom: '1px solid rgba(14,165,233,0.2)' }}>
@@ -821,8 +821,9 @@ export default function ReportingPage() {
                                                     whiteSpace: 'nowrap',
                                                     cursor: def?.sortable ? 'pointer' : 'default',
                                                     userSelect: 'none',
-                                                    background: 'rgba(15,26,46,0.6)',
-                                                    position: 'relative',
+                                                    background: 'rgb(10, 20, 36)',
+                                                    position: 'sticky', top: 0, zIndex: 10,
+                                                    boxShadow: '0 1px 0 rgba(14,165,233,0.2)',
                                                 }}
                                             >
                                                 <span style={{ display: 'inline-flex', alignItems: 'center' }}>