update

app.js

@@ -266,33 +266,26 @@ function hideStatusIndicator() {
   }
 }
 // Show Alert
+// Show alert message
 function showAlert(type, message) {
-  const alertContainer = document.getElementById('alert-container');
+  const alertBox = document.createElement('div');
+  alertBox.className = `alert alert-${type}`;
+  alertBox.textContent = message;
 
-  // Create alert element
+  const container = document.querySelector('#alert-container');
-  const alert = document.createElement('div');
+  if (container) {
-  alert.className = `alert ${type}`;
+      container.appendChild(alertBox);
-  alert.innerHTML = `
-    <span>${message}</span>
-    <button class="close-btn" aria-label="Close">&times;</button>
-  `;
 
-  // Add close button functionality
-  const closeButton = alert.querySelector('.close-btn');
-  closeButton.addEventListener('click', () => {
-    alert.remove(); // Remove alert on close
-  });
-
-  // Append alert to container
-  alertContainer.appendChild(alert);
-
-  // Automatically remove alert after 5 seconds
       setTimeout(() => {
-    alert.remove();
+          container.removeChild(alertBox);
       }, 5000);
+  } else {
+      console.warn('[WARN] Alert container not found.');
+  }
 }
 
 
+
 // Collapse Sidebar Functionality
 const collapseSidebarBtn = document.getElementById('collapse-sidebar-btn');
 collapseSidebarBtn.addEventListener('click', () => {

index.html

@@ -254,7 +254,8 @@
     #alert-container {
   position: fixed;
   bottom: 20px;
-      right: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1055;
   /* Ensure it overlays important elements only */
   display: flex;
@@ -264,13 +265,25 @@
   /* Add space between alerts */
   pointer-events: none;
   /* Prevent container from blocking clicks */
-    }
+}
 
-    .alert {
+#alert-container {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1055;
   display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+  /* Prevent container from blocking clicks */
+}
+
+.alert {
+  display: inline-flex;
   align-items: center;
   justify-content: space-between;
-      max-width: 80%;
   padding: 12px 20px;
   background-color: #2b2b2b;
   color: #e0e0e0;
@@ -284,7 +297,7 @@
   text-overflow: ellipsis;
   pointer-events: auto;
   /* Allow alerts to be interactive */
-    }
+}
 
     .alert.success {
       border-left: 6px solid #28a745;
@@ -673,6 +686,7 @@
   <div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"
     style="z-index: 1051; max-width: 90%;"></div>
 
+
   <!-- xterm.js -->
   <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
 

libs/templateDeploy.js

@@ -230,7 +230,7 @@ deployForm.addEventListener('submit', async (e) => {
         // Wait for deployment to complete
         const successResponse = await deployDockerContainer(deployPayload);
         hideStatusIndicator();
-        showAlert('success', successResponse.message);
+        // showAlert('success', successResponse.message);
     } catch (error) {
         console.error('[ERROR] Failed to deploy container:', error.message);
         hideStatusIndicator();