js fixes

proprietary/src/main/resources/static/css/audit-dashboard.css

@@ -129,12 +129,14 @@
     background-color: var(--md-sys-color-surface-container-low);
     color: var(--md-sys-color-on-surface);
     border-radius: 4px;
-    padding: 10px;
+    padding: 15px;
-    max-height: 300px;
+    max-height: 350px;
     overflow-y: auto;
     font-family: monospace;
+    font-size: 0.9rem;
     white-space: pre-wrap;
     border: 1px solid var(--md-sys-color-outline-variant);
+    margin-top: 10px;
 }
 
 /* Simple, minimal radio styling - no extras */
@@ -192,6 +194,17 @@ label.btn-outline-primary input[type="radio"] {
     border-top-color: var(--md-sys-color-outline-variant);
 }
 
+/* Improved modal positioning */
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 3.5rem);
+}
+
+.modal {
+    z-index: 1050;
+}
+
 /* Button overrides for theme consistency */
 .btn-outline-primary {
     color: var(--md-sys-color-primary);

proprietary/src/main/resources/static/js/audit/dashboard.js

@@ -358,7 +358,7 @@ function renderTable(events) {
                     <td>${formatDate(event.timestamp)}</td>
                     <td>${escapeHtml(event.principal || 'N/A')}</td>
                     <td>${escapeHtml(event.type || 'N/A')}</td>
-                    <td><button class="btn btn-sm btn-outline-primary view-details">View Details</button></td>
+                    <td><button class="btn btn-sm btn-outline-primary view-details">${window.i18n.viewDetails || 'View Details'}</button></td>
                 `;
                 
                 // Store event data for modal
@@ -385,22 +385,35 @@ function renderTable(events) {
 
 // Show event details in modal
 function showEventDetails(event) {
-    modalId.textContent = event.id;
+    // Get modal elements by ID with correct hyphenated IDs from HTML
-    modalPrincipal.textContent = event.principal;
+    const modalId = document.getElementById('modal-id');
-    modalType.textContent = event.type;
+    const modalPrincipal = document.getElementById('modal-principal');
-    modalTimestamp.textContent = formatDate(event.timestamp);
+    const modalType = document.getElementById('modal-type');
+    const modalTimestamp = document.getElementById('modal-timestamp');
+    const modalData = document.getElementById('modal-data');
+    const eventDetailsModal = document.getElementById('eventDetailsModal');
+    
+    // Set modal content
+    if (modalId) modalId.textContent = event.id;
+    if (modalPrincipal) modalPrincipal.textContent = event.principal;
+    if (modalType) modalType.textContent = event.type;
+    if (modalTimestamp) modalTimestamp.textContent = formatDate(event.timestamp);
     
     // Format JSON data
-    try {
+    if (modalData) {
-        const dataObj = JSON.parse(event.data);
+        try {
-        modalData.textContent = JSON.stringify(dataObj, null, 2);
+            const dataObj = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
-    } catch (e) {
+            modalData.textContent = JSON.stringify(dataObj, null, 2);
-        modalData.textContent = event.data;
+        } catch (e) {
+            modalData.textContent = event.data || 'No data available';
+        }
     }
     
     // Show the modal
-    const modal = new bootstrap.Modal(eventDetailsModal);
+    if (eventDetailsModal) {
-    modal.show();
+        const modal = new bootstrap.Modal(eventDetailsModal);
+        modal.show();
+    }
 }
 
 // No need for a dynamic pagination renderer anymore as we're using static buttons

proprietary/src/main/resources/templates/audit/dashboard.html

@@ -234,7 +234,7 @@
                 
                 <!-- Event Details Modal -->
                 <div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsModalLabel" aria-hidden="true">
-                    <div class="modal-dialog modal-lg">
+                    <div class="modal-dialog modal-lg modal-dialog-centered">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="eventDetailsModalLabel" th:text="#{audit.dashboard.modal.eventDetails}">Event Details</h5>
@@ -368,7 +368,8 @@
             loadingPage: /*[[#{audit.dashboard.js.loadingPage}]]*/ 'Loading page',
             eventsByType: /*[[#{audit.dashboard.eventsByType}]]*/ 'Events by Type',
             eventsByUser: /*[[#{audit.dashboard.eventsByUser}]]*/ 'Events by User',
-            eventsOverTime: /*[[#{audit.dashboard.eventsOverTime}]]*/ 'Events Over Time'
+            eventsOverTime: /*[[#{audit.dashboard.eventsOverTime}]]*/ 'Events Over Time',
+            viewDetails: /*[[#{audit.dashboard.table.viewDetails}]]*/ 'View Details'
         };
     </script>
     

stirling-pdf/src/main/resources/messages_en_GB.properties

@@ -1676,6 +1676,7 @@ audit.dashboard.table.time=Time
 audit.dashboard.table.user=User
 audit.dashboard.table.type=Type
 audit.dashboard.table.details=Details
+audit.dashboard.table.viewDetails=View Details
 
 # Pagination
 audit.dashboard.pagination.show=Show