feat: show model details in modal with close controls

- Replace inline details panel with centered modal overlay
- Add close button (X) in top-right of modal
- Add close on backdrop click
- Add close on Escape key
- Lock body scroll while modal is open

app/web/static/js/app.js

@@ -49,6 +49,23 @@ class LLMMonitorApp {
             }
             this.showModelDetails(decodeURIComponent(modelKey));
         });
+
+        // Chiusura modal con pulsante X
+        document.getElementById("model-details-close")?.addEventListener("click", () => {
+            this.hideModelDetails();
+        });
+
+        // Chiusura modal con click su overlay
+        document.getElementById("model-details-backdrop")?.addEventListener("click", () => {
+            this.hideModelDetails();
+        });
+
+        // Chiusura modal con tasto Esc
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+                this.hideModelDetails();
+            }
+        });
     }
 
     // Caricare dati da localStorage
@@ -195,11 +212,11 @@ class LLMMonitorApp {
     }
 
     showModelDetails(modelName) {
-        const detailsSection = document.getElementById("model-details-section");
+        const detailsModal = document.getElementById("model-details-modal");
         const detailsName = document.getElementById("model-details-name");
         const detailsContent = document.getElementById("model-details-content");
 
-        if (!detailsSection || !detailsName || !detailsContent || !this.lastData.models) {
+        if (!detailsModal || !detailsName || !detailsContent || !this.lastData.models) {
             return;
         }
 
@@ -207,9 +224,9 @@ class LLMMonitorApp {
         const showData = showByModel[modelName];
         this.selectedModelName = modelName;
 
-        detailsSection.classList.remove("hidden");
+        detailsModal.classList.remove("hidden");
+        document.body.classList.add("overflow-hidden");
         detailsName.textContent = modelName;
-        detailsSection.scrollIntoView({ behavior: "smooth", block: "start" });
 
         if (!showData) {
             detailsContent.textContent = "Dettagli show non disponibili per questo modello.";
@@ -219,6 +236,16 @@ class LLMMonitorApp {
         detailsContent.textContent = JSON.stringify(showData, null, 2);
     }
 
+    hideModelDetails() {
+        const detailsModal = document.getElementById("model-details-modal");
+        if (!detailsModal || detailsModal.classList.contains("hidden")) {
+            return;
+        }
+
+        detailsModal.classList.add("hidden");
+        document.body.classList.remove("overflow-hidden");
+    }
+
     // Formattare bytes
     formatBytes(bytes) {
         if (bytes === 0) return "0 B";