From 56d0fc6824177ee377bad69ec575b19ae9c12732 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 9 Dec 2025 18:12:25 +0000
Subject: [PATCH] fix: properly display multi-line app prompts

* Fixes that multi-line app prompts were displayed on a single line due
  to the missing `code` class.
* Fixes that code overlap (horizontal) is scrollable but doesn't
  overflow and flaws the UI.
---
 report-app/src/app/pages/report-viewer/report-viewer.html | 5 +++--
 report-app/src/app/shared/styles/callouts.scss            | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/report-app/src/app/pages/report-viewer/report-viewer.html b/report-app/src/app/pages/report-viewer/report-viewer.html
index 106d794..54ff0a5 100644
--- a/report-app/src/app/pages/report-viewer/report-viewer.html
+++ b/report-app/src/app/pages/report-viewer/report-viewer.html
@@ -365,7 +365,7 @@ <h2>Generated applications</h2>
           <div class="app-details">
             <div class="app-details-section">
               <h4>Prompt</h4>
-              <pre class="callout neutral">{{ result.promptDef.prompt }}</pre>
+              <pre class="callout neutral code">{{ result.promptDef.prompt }}</pre>
             </div>
 
             <div class="app-details-section">
@@ -422,7 +422,8 @@ <h5>
                   [class.warn]="totalPercent < 90 && totalPercent >= 80"
                   [class.error]="totalPercent < 80"
                 >
-                  {{ result.score.totalPoints }} / {{ result.score.maxOverallPoints }} points ({{totalPercent}}%)
+                  {{ result.score.totalPoints }} / {{ result.score.maxOverallPoints }} points ({{totalPercent
+                  }}%)
                 </span>
               </div>
             </div>
diff --git a/report-app/src/app/shared/styles/callouts.scss b/report-app/src/app/shared/styles/callouts.scss
index 84bc52c..71fec1b 100644
--- a/report-app/src/app/shared/styles/callouts.scss
+++ b/report-app/src/app/shared/styles/callouts.scss
@@ -11,6 +11,7 @@
       font-family: monospace;
       font-size: 0.75rem;
       white-space: pre-wrap;
+      overflow: scroll;
     }
 
     &.neutral {