Simplify modal initialization and fix display issue

Removed debugging code and aria-hidden event listeners that were
preventing the modal from displaying. Using Bootstrap's
getOrCreateInstance() to avoid modal instance conflicts.

Changes:
- Remove aria-hidden event listeners that blocked modal display
- Remove debugging console.log statements
- Use Modal.getOrCreateInstance() instead of new Modal()
- Simplify event handler to essential functionality only

The aria-hidden event listeners were preventing the modal from
showing properly. getOrCreateInstance() prevents duplicate modal
instances that can cause display issues.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/views/layouts/shared/_header.html.erb

@@ -135,59 +135,28 @@
       const modalElement = document.getElementById('credentialsModal');
 
       if (showCredsBtn && modalElement) {
-        // Remove any existing listeners
+        // Remove any existing listeners by cloning
         const newBtn = showCredsBtn.cloneNode(true);
         showCredsBtn.parentNode.replaceChild(newBtn, showCredsBtn);
 
-        // Fix aria-hidden timing issue with Bootstrap 5
-        modalElement.addEventListener('hide.bs.modal', function() {
-          // Remove aria-hidden before the modal closes to prevent focus conflict
-          this.removeAttribute('aria-hidden');
-        });
-
-        modalElement.addEventListener('hidden.bs.modal', function() {
-          // Add aria-hidden back after modal is fully closed and focus has moved
-          setTimeout(() => {
-            this.setAttribute('aria-hidden', 'true');
-          }, 0);
-        });
-
-        modalElement.addEventListener('show.bs.modal', function() {
-          // Ensure aria-hidden is removed when opening
-          this.removeAttribute('aria-hidden');
-        });
-
         newBtn.addEventListener('click', function(event) {
           event.preventDefault();
-          console.log('Demo Credentials button clicked');
-          console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
-          console.log('Modal element:', modalElement);
 
           fetch('<%= credentials_tutorials_path %>')
-            .then(response => {
+            .then(response => response.text())
-              console.log('Fetch response status:', response.status);
-              return response.text();
-            })
             .then(html => {
-              console.log('Content loaded, length:', html.length);
               document.getElementById('modal_content').innerHTML = html;
 
-              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
+              // Use Bootstrap 5 Modal API directly
-                const modal = new bootstrap.Modal(modalElement);
+              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
-                console.log('Modal instance created:', modal);
+              modal.show();
-                modal.show();
-              } else {
-                console.error('Bootstrap Modal not available');
-              }
             })
             .catch(error => {
               console.error('Error loading credentials:', error);
               document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
 
-              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
+              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
-                const modal = new bootstrap.Modal(modalElement);
+              modal.show();
-                modal.show();
-              }
             });
         });
       }