fix: modals now visible + wizard steps switch correctly

Modal fix (root cause: PatternFly collision + overflow clipping):
- PatternFly ships .modal with display:none — our class merged with it
- Renamed to .sl-modal-overlay and .sl-modal to avoid conflict
- Added ModalPortal using ReactDOM.createPortal to render modals at
  document.body level, outside any scrollable/overflow container
- All three modals (Allocation, BillingRule, Refund) now portal to body

Wizard fix (root cause: Fragment children spreading in ternary):
- Extracted renderStep() function — each step returns a plain div
- Only one step renders per call, no Fragment spreading issues
- Key={step} forces React to unmount/remount on step change
- Steps now properly replace each other instead of stacking

Author: Sqoia Dev Agent

src/slurmledger.css

@@ -282,23 +282,24 @@ nav button:hover {
   margin-top: 0.2em;
 }
 
-/* Modal overlay for refunds and other dialogs */
-.modal-overlay {
+/* Modal overlay for refunds and other dialogs.
+   Prefixed sl- to avoid collisions with PatternFly's own .modal class.
+   Both elements are portalled to document.body so overflow/stacking-context
+   on ancestor containers cannot clip or hide them. */
+.sl-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 99999;
 }
 
-.modal {
+.sl-modal {
   background: #fff;
   border-radius: 8px;
   padding: 1.5em 2em;
@@ -307,11 +308,11 @@ nav button:hover {
   max-width: 600px;
   max-height: 80vh;
   overflow-y: auto;
-  z-index: 10000;
+  z-index: 100000;
   position: relative;
 }
 
-.modal h3 {
+.sl-modal h3 {
   margin-top: 0;
   margin-bottom: 1em;
 }

src/slurmledger.js

@@ -2025,6 +2025,12 @@ function AllocationProgressBar({ percent }) {
   );
 }
 
+// Renders modal content as a direct child of document.body, escaping any
+// overflow/stacking-context created by ancestor scrollable containers.
+function ModalPortal({ children }) {
+  return ReactDOM.createPortal(children, document.body);
+}
+
 // Modal for editing a single allocation entry
 function AllocationModal({ allocation, accountName, onSave, onClose }) {
   const [form, setForm] = useState(allocation ? { ...allocation } : {
@@ -2072,18 +2078,21 @@ function AllocationModal({ allocation, accountName, onSave, onClose }) {
   }
 
   return React.createElement(
-    'div',
-    { className: 'modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
+    ModalPortal,
+    null,
     React.createElement(
       'div',
-      {
-        className: 'modal',
-        onClick: e => e.stopPropagation(),
-        style: { maxWidth: '520px', width: '95%' }
-      },
-      React.createElement('h3', null, `${allocation ? 'Edit' : 'Add'} Allocation: ${accountName}`),
-      error && React.createElement('p', { className: 'error' }, error),
+      { className: 'sl-modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
       React.createElement(
+        'div',
+        {
+          className: 'sl-modal',
+          onClick: e => e.stopPropagation(),
+          style: { maxWidth: '520px', width: '95%' }
+        },
+        React.createElement('h3', null, `${allocation ? 'Edit' : 'Add'} Allocation: ${accountName}`),
+        error && React.createElement('p', { className: 'error' }, error),
+        React.createElement(
         'div',
         { style: { marginBottom: '0.75em' } },
         React.createElement('label', null, 'Type: '),
@@ -2180,6 +2189,7 @@ function AllocationModal({ allocation, accountName, onSave, onClose }) {
         React.createElement('button', { onClick: handleSave }, 'Save')
       )
     )
+    )
   );
 }
 
@@ -2719,14 +2729,17 @@ function BillingRuleModal({ rule, onSave, onClose }) {
     : '';
 
   return React.createElement(
-    'div',
-    { className: 'modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
+    ModalPortal,
+    null,
     React.createElement(
       'div',
-      { className: 'modal', onClick: e => e.stopPropagation(), style: { maxWidth: '560px', width: '95%' } },
-      React.createElement('h3', null, isNew ? 'Add Billing Rule' : `Edit Rule: ${rule.name}`),
-      error && React.createElement('p', { className: 'error' }, error),
-      React.createElement('div', { style: { marginBottom: '0.75em' } },
+      { className: 'sl-modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
+      React.createElement(
+        'div',
+        { className: 'sl-modal', onClick: e => e.stopPropagation(), style: { maxWidth: '560px', width: '95%' } },
+        React.createElement('h3', null, isNew ? 'Add Billing Rule' : `Edit Rule: ${rule.name}`),
+        error && React.createElement('p', { className: 'error' }, error),
+        React.createElement('div', { style: { marginBottom: '0.75em' } },
         React.createElement('label', null, 'Rule ID: '),
         React.createElement('input', {
           ref: firstInputRef, type: 'text', value: form.id, disabled: !isNew,
@@ -2830,6 +2843,7 @@ function BillingRuleModal({ rule, onSave, onClose }) {
         React.createElement('button', { onClick: handleSave }, 'Save')
       )
     )
+    )
   );
 }
 
@@ -4329,16 +4343,19 @@ function RefundModal({ invoice, currentUser, onClose, onIssue }) {
   }
 
   return React.createElement(
-    'div',
-    { className: 'modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
+    ModalPortal,
+    null,
     React.createElement(
       'div',
-      {
-        className: 'modal',
-        onClick: e => e.stopPropagation(),
-        style: { maxWidth: '480px', width: '90%' }
-      },
-      React.createElement('h3', null, `Issue Refund — ${invoice.id}`),
+      { className: 'sl-modal-overlay', onClick: onClose, onKeyDown: (e) => { if (e.key === 'Escape') onClose(); } },
+      React.createElement(
+        'div',
+        {
+          className: 'sl-modal',
+          onClick: e => e.stopPropagation(),
+          style: { maxWidth: '480px', width: '90%' }
+        },
+        React.createElement('h3', null, `Issue Refund — ${invoice.id}`),
       React.createElement(
         'div',
         { style: { marginBottom: '0.75em' } },
@@ -4391,6 +4408,7 @@ function RefundModal({ invoice, currentUser, onClose, onIssue }) {
         )
       )
     )
+    )
   );
 }
 
@@ -6020,14 +6038,19 @@ function SetupWizard({ onComplete }) {
     ),
     React.createElement('div', { style: { flexShrink: 0 } }, progressBar),
 
-    // Step content — single scrollable container that switches content by step
+    // Step content — keyed wrapper remounts on step change; renderStep returns
+    // a single plain div per step so there is no Fragment ambiguity.
     React.createElement(
       'div',
-      { key: 'step-' + step, style: { overflowY: 'auto', flex: 1, paddingRight: '0.5em' } },
+      { key: step, style: { overflowY: 'auto', flex: 1, paddingRight: '0.5em' } },
+      renderStep()
+    )
+  ); // close SetupWizard outer div
 
-      // Step 1: Institution Profile
-      step === 1 ? React.createElement(
-        React.Fragment,
+  function renderStep() {
+    if (step === 1) {
+      return React.createElement(
+        'div',
         null,
         React.createElement(InstitutionProfile, null),
         React.createElement(
@@ -6039,11 +6062,12 @@ function SetupWizard({ onComplete }) {
             'Next: Set Billing Rates \u2192'
           )
         )
-      ) :
+      );
+    }
 
-      // Step 2: Rate Configuration
-      step === 2 ? React.createElement(
-        React.Fragment,
+    if (step === 2) {
+      return React.createElement(
+        'div',
         null,
         React.createElement(Rates, { onRatesUpdated: () => {}, username: '', userRole: 'admin' }),
         React.createElement(
@@ -6056,12 +6080,13 @@ function SetupWizard({ onComplete }) {
             'Next: Test Connection \u2192'
           )
         )
-      ) :
+      );
+    }
 
-      // Step 3: Database connection test
-      React.createElement(
-        React.Fragment,
-        null,
+    // Step 3: Database connection test
+    return React.createElement(
+      'div',
+      null,
       React.createElement('h3', null, 'Test Database Connection'),
       React.createElement(
         'p',
@@ -6131,9 +6156,8 @@ function SetupWizard({ onComplete }) {
           )
         )
       )
-    ) // close Step 3 Fragment
-    ) // close scrollable wrapper div
-  ); // close SetupWizard outer div
+    );
+  }
 }
 
 function App() {