diff --git a/assets/css/style.css b/assets/css/style.css
index 2e260c0..b55427e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -4915,7 +4915,8 @@ body.cooking-mode-active .app-header {
display: flex;
align-items: flex-start;
gap: 10px;
- padding: 12px 12px 8px;
+ padding: 12px 44px 8px 12px; /* right pad reserves space for abs-positioned close btn */
+ position: relative;
}
.alert-banner-icon {
font-size: 1.5rem;
@@ -4923,14 +4924,17 @@ body.cooking-mode-active .app-header {
line-height: 1;
}
.alert-banner-body {
- flex: 1;
+ flex: 1 1 0;
min-width: 0;
+ overflow: hidden;
}
.alert-banner-title {
font-weight: 700;
font-size: 0.95rem;
color: #92400e;
line-height: 1.3;
+ word-break: break-word;
+ overflow-wrap: break-word;
}
.banner-prediction .alert-banner-title {
color: #5b21b6;
@@ -4942,7 +4946,9 @@ body.cooking-mode-active .app-header {
line-height: 1.4;
}
.alert-banner-close {
- flex-shrink: 0;
+ position: absolute;
+ top: 10px;
+ right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
@@ -4954,6 +4960,7 @@ body.cooking-mode-active .app-header {
align-items: center;
justify-content: center;
color: #78716c;
+ z-index: 1;
}
.alert-banner-actions {
display: flex;
diff --git a/assets/js/app.js b/assets/js/app.js
index 489a986..9ddbb69 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -3416,10 +3416,10 @@ async function explainBannerAnomaly() {
const an = entry.data;
// Show loading inline in the banner detail area
- const detailEl = document.querySelector('#alert-banner .banner-detail');
+ const detailEl = document.getElementById('alert-banner-detail');
if (!detailEl) return;
const originalHtml = detailEl.innerHTML;
- detailEl.innerHTML = '\ud83e\udd16 Analizzo…';
+ detailEl.innerHTML = '\ud83e\udd16 Analizzo\u2026';
// Disable the Spiega button to prevent double calls
const explainBtn = document.querySelector('#alert-banner .btn-banner-ai');