From 81efbb4dfff6b3cd4d8df4ab2e4b5d21b84e9a43 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Thu, 8 Jan 2026 14:01:51 -0800
Subject: [PATCH] Wrap diagnostic messages in unordered lists and add styling
 for scrollable lists.

PiperOrigin-RevId: 853875719
---
 .../diagnostics_view/diagnostics_view.ng.html  | 18 ++++++++++++------
 frontend/app/styles/common.scss                | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/diagnostics_view/diagnostics_view.ng.html b/frontend/app/components/diagnostics_view/diagnostics_view.ng.html
index 729046782..5b7a5cbdf 100644
--- a/frontend/app/components/diagnostics_view/diagnostics_view.ng.html
+++ b/frontend/app/components/diagnostics_view/diagnostics_view.ng.html
@@ -1,15 +1,21 @@
 <div *ngIf="diagnostics.errors.length" class="callout is-critical">
   <header>Errors</header>
-  <li *ngFor="let error of diagnostics.errors" [innerHtml]="error">
-  </li>
+  <ul class="callout-list">
+    <li *ngFor="let error of diagnostics.errors" [innerHtml]="error">
+    </li>
+  </ul>
 </div>
 <div *ngIf="diagnostics.warnings.length" class="callout is-important">
   <header>Warnings</header>
-  <li *ngFor="let warning of diagnostics.warnings" [innerHtml]="warning">
-  </li>
+  <ul class="callout-list">
+    <li *ngFor="let warning of diagnostics.warnings" [innerHtml]="warning">
+    </li>
+  </ul>
 </div>
 <div *ngIf="diagnostics.info.length" class="callout is-helpful">
   <header>Info</header>
-  <li *ngFor="let info of diagnostics.info" [innerHtml]="info">
-  </li>
+  <ul class="callout-list">
+    <li *ngFor="let info of diagnostics.info" [innerHtml]="info">
+    </li>
+  </ul>
 </div>
diff --git a/frontend/app/styles/common.scss b/frontend/app/styles/common.scss
index d44f24b79..787b32a1c 100644
--- a/frontend/app/styles/common.scss
+++ b/frontend/app/styles/common.scss
@@ -236,6 +236,22 @@ mat-progress-bar {
   padding: 12px 24px;
 }
 
+.callout-list {
+  margin: 10px;
+  max-height: 20vh;
+  overflow-y: auto;
+  list-style-position: outside;
+}
+
+.callout-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  padding: 5px;
+  background: rgba(25, 118, 210, 0.20);
+}
+
 .callout.is-critical {
   border-color: #dd0031;
   background: rgba(221, 0, 49, 0.05);