From c7b04f410ba82bee09fd4bb187213d00520a49a4 Mon Sep 17 00:00:00 2001
From: dadaloop82 <evershelfproject@gmail.com>
Date: Tue, 5 May 2026 18:25:16 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20alert=20banner=20=E2=80=94=20'Spiega'=20?=
 =?UTF-8?q?button=20and=20title=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- explainBannerAnomaly: querySelector('#alert-banner .banner-detail')
  was wrong (class is 'alert-banner-detail'); function returned null → no-op.
  Fixed to getElementById('alert-banner-detail').
- alert-banner-inner: position close button absolutely (top:10px right:10px)
  so it is removed from the flex row and can never push the title-body to
  collapse or wrap under it. Inner gets padding-right:44px to reserve space.
- alert-banner-body: flex:1 1 0 + overflow:hidden for robust sizing
- alert-banner-title: word-break/overflow-wrap so very long product names
  wrap cleanly inside the body instead of overflowing
---
 assets/css/style.css | 13 ++++++++++---
 assets/js/app.js     |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

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 = '<em style="opacity:0.7">\ud83e\udd16 Analizzo…</em>';
+    detailEl.innerHTML = '<em style="opacity:0.7">\ud83e\udd16 Analizzo\u2026</em>';
 
     // Disable the Spiega button to prevent double calls
     const explainBtn = document.querySelector('#alert-banner .btn-banner-ai');