From 6ca4275ff23add6f170fa289af551d096c0b3a3d Mon Sep 17 00:00:00 2001
From: mptyl <mp@tylconsulting.it>
Date: Thu, 23 Jul 2026 23:01:29 +0200
Subject: [PATCH] fix: improve memory markdown layout

---
 .../src/widgets/MultiselectWidget.test.tsx    |  8 ++---
 frontend/src/widgets/MultiselectWidget.tsx    | 32 +++++++++++++------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/frontend/src/widgets/MultiselectWidget.test.tsx b/frontend/src/widgets/MultiselectWidget.test.tsx
index dea75230..ff441488 100644
--- a/frontend/src/widgets/MultiselectWidget.test.tsx
+++ b/frontend/src/widgets/MultiselectWidget.test.tsx
@@ -57,8 +57,8 @@ test("shows the exact content and provenance for every memory option", () => {
             id: "mem-42",
             label: "paziente attivo",
             detail: "flag_attivo = TRUE",
-            rationale: "Confermato dal reviewer",
-            meta: { question_context: "Conta i pazienti attivi" },
+            rationale: "*Confermato* dal reviewer",
+            meta: { question_context: "Conta i **pazienti attivi**" },
           },
         ],
       }}
@@ -67,8 +67,8 @@ test("shows the exact content and provenance for every memory option", () => {
   );
 
   expect(screen.getByText("flag_attivo = TRUE")).toBeInTheDocument();
-  expect(screen.getByText(/Confermato dal reviewer/)).toBeInTheDocument();
-  expect(screen.getByText(/Conta i pazienti attivi/)).toBeInTheDocument();
+  expect(screen.getByText("Confermato").tagName).toBe("EM");
+  expect(screen.getByText("pazienti attivi").tagName).toBe("STRONG");
 });
 
 test("renders memory detail as human-friendly Markdown", () => {
diff --git a/frontend/src/widgets/MultiselectWidget.tsx b/frontend/src/widgets/MultiselectWidget.tsx
index f38991da..a049e973 100644
--- a/frontend/src/widgets/MultiselectWidget.tsx
+++ b/frontend/src/widgets/MultiselectWidget.tsx
@@ -58,24 +58,36 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
                 checked={checked.has(o.id)}
                 onChange={() => toggle(o.id)}
               />
-              <span className="min-w-0 flex-1">
-                <span className="block font-medium">{o.label}</span>
+              <div className="min-w-0 flex-1">
+                <div className="font-medium leading-snug">{o.label}</div>
                 {o.detail && (
-                  <div className="thot-prose mt-1 text-sm text-muted-foreground">
+                  <div className="thot-prose mt-2 text-sm leading-relaxed text-muted-foreground">
                     <ReactMarkdown remarkPlugins={[remarkGfm]}>{o.detail}</ReactMarkdown>
                   </div>
                 )}
                 {o.rationale && (
-                  <span className="mt-1 block text-xs text-foreground/80">
-                    Motivo: {o.rationale}
-                  </span>
+                  <div className="mt-3 border-l-2 border-border/70 pl-3 text-xs text-foreground/80">
+                    <div className="mb-1 font-semibold uppercase tracking-wide text-muted-foreground">
+                      Motivo
+                    </div>
+                    <div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{o.rationale}</ReactMarkdown>
+                    </div>
+                  </div>
                 )}
                 {typeof o.meta?.question_context === "string" && o.meta.question_context && (
-                  <span className="mt-1 block text-xs text-muted-foreground">
-                    Domanda di contesto: {o.meta.question_context}
-                  </span>
+                  <div className="mt-3 border-l-2 border-border/50 pl-3 text-xs text-muted-foreground">
+                    <div className="mb-1 font-semibold uppercase tracking-wide">
+                      Domanda di contesto
+                    </div>
+                    <div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {o.meta.question_context}
+                      </ReactMarkdown>
+                    </div>
+                  </div>
                 )}
-              </span>
+              </div>
             </label>
           ))}
         </div>