From 03e9778c4cdd710896e72ff4e33429c7078145e1 Mon Sep 17 00:00:00 2001
From: Gergely Gulyas <gergely.gulyas.ext@ericsson.com>
Date: Wed, 1 Jul 2026 10:40:03 +0200
Subject: [PATCH 1/2] [gui] Break the report step message to multiple lines if
 too long

The report step message can overflow off of the report step message
container which makes it hard to read and understand. This change fixes
the issue and makes the text break to multiple lines if it is too long.
---
 .../components/Report/ReportStepMessage.vue   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
index 3ed84e9f80..671626d70b 100644
--- a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
+++ b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
@@ -1,16 +1,15 @@
 <template>
-  <v-chip
+  <v-card
     size="small"
     variant="flat"
-    class="report-step-msg"
+    class="report-step-msg px-2"
     :color="color"
     :step-id="id"
     :type="type"
     :style="{ 'margin-left': marginLeft, color: textColor }"
-    :title="value"
     rounded="xs"
   >
-    <div class="d-flex align-center ga-2">
+    <v-card-text class="pa-0 d-flex align-center">
       <report-step-enum-icon
         class="report-step-enum mr-1"
         :type="type"
@@ -26,9 +25,14 @@
         @click="showPrevReport"
       />
 
-      <div>
-        <div>{{ value }}</div>
-        <div v-if="!hideDocUrl && type === 'error'">
+      <div class="flex-grow-1 flex-shrink-1 mx-3" style="min-width: 0;">
+        <div class="text-body-2 text-wrap text-break">
+          {{ value }}
+        </div>
+        <div
+          v-if="!hideDocUrl && type === 'error'"
+          class="text-caption"
+        >
           <p v-if="docUrl" class="mb-0 text-caption">
             For more information see the
             <a
@@ -56,8 +60,8 @@
         density="compact"
         @click="showNextReport"
       />
-    </div>
-  </v-chip>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script setup>

From 2b5f4fcba80d030f94178393d6435c77b3cf3507 Mon Sep 17 00:00:00 2001
From: Gergely Gulyas <gergely.gulyas.ext@ericsson.com>
Date: Wed, 1 Jul 2026 11:23:22 +0200
Subject: [PATCH 2/2] [gui] Highlight report message boxes according to its
 type

This change adds the coloring to be according to the type of
the report message.
---
 .../src/components/Report/ReportStepMessage.vue  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
index 671626d70b..ddd81a70cb 100644
--- a/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
+++ b/web/server/vue-cli/src/components/Report/ReportStepMessage.vue
@@ -160,4 +160,20 @@ function showDocumentation() {
   opacity: 1;
   font-weight: bold;
 }
+
+.current[type="error"] {
+  border: 2px dashed #a94442 !important;
+}
+
+.current[type="fixit"] {
+  border: 2px dashed #8a6d3b !important;
+}
+
+.current[type="macro"] {
+  border: 2px dashed #4f5c6d !important;
+}
+
+.current[type="note"] {
+  border: 2px dashed #4f5c6d !important;
+}
 </style>