fix: main app layout with scrollable content area

App layout is now flex column with fixed header + nav and scrollable
content area. Dashboards, details, invoices, and settings all scroll
independently within the viewport. No more content cut off at the
bottom of the page.

- html/body/#root set to height: 100%, overflow: hidden
- App container: flex column, height: 100vh
- Header + nav: flexShrink: 0 (pinned)
- Content area: flex: 1, overflowY: auto (scrollable)

Author: Sqoia Dev Agent

src/slurmledger.css

@@ -1,8 +1,13 @@
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
 body {
   /* Use Cockpit/PatternFly's default font so the plugin matches the host UI */
   font-family: var(--pf-global--FontFamily--sans-serif);
-  margin: 0;
-  padding: 0;
 }
 
 nav {

src/slurmledger.js

@@ -6231,19 +6231,29 @@ function App() {
 
   return React.createElement(
     'div',
-    { className: 'app' },
+    {
+      className: 'app',
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        overflow: 'hidden'
+      }
+    },
 
-    // Header with role indicator
+    // Header with role indicator (fixed)
     React.createElement(
       'div',
       {
         style: {
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '0.5em 0',
-          marginBottom: '0.5em',
-          borderBottom: '1px solid #e5e7eb'
+          padding: '0.5em 1em',
+          borderBottom: '1px solid #e5e7eb',
+          flexShrink: 0,
+          background: '#fff',
+          zIndex: 10
         }
       },
       React.createElement('span', { style: { fontWeight: 'bold', fontSize: '1.1em' } }, 'SlurmLedger'),
@@ -6266,7 +6276,7 @@ function App() {
 
     React.createElement(
       'nav',
-      null,
+      { style: { flexShrink: 0, padding: '0 1em', background: '#fff', borderBottom: '1px solid #f3f4f6' } },
       navTabs.map(tab =>
         React.createElement(
           'button',
@@ -6279,6 +6289,19 @@ function App() {
         )
       )
     ),
+
+    // Scrollable content area
+    React.createElement(
+      'div',
+      {
+        style: {
+          flex: 1,
+          overflowY: 'auto',
+          padding: '1em',
+          background: '#fafafa'
+        }
+      },
+
     activeView === 'summary' &&
       React.createElement(
         'div',
@@ -6373,6 +6396,7 @@ function App() {
     activeView === 'invoices' && React.createElement(Invoices, { currentUser: username, billingData: data, institutionProfile }),
     activeView === 'audit' && React.createElement(AuditLogViewer, { invoiceLedger }),
     activeView === 'settings' && React.createElement(Rates, { onRatesUpdated: reload, billingData: data, username, userRole })
+    ) // close scrollable content div
   );
 }