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.

Author: devversion

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>

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 {