From 63bfece29494fea177bba90515be79a3cde09188 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Sat, 11 Apr 2020 18:09:07 +0200
Subject: [PATCH] Diagnosis items now contain raw HTML, misc cosmetic /
 readability tweaks

---
 src/css/style.less                    | 11 ++++++++++-
 src/views/diagnosis/diagnosis_show.ms |  8 ++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index 395ab687..016c6cfb 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -980,7 +980,8 @@ input[type='radio'].nice-radio {
   transition: none !important;
 }
 
-/* Just to be able to override list-group-item with alert-success's background and border colors */
+/* Diagnosis styles */
+
 .alert-success-yo {
 	background-color: #dff0d8;
 	border-color: #d6e9c6;
@@ -1006,3 +1007,11 @@ input[type='radio'].nice-radio {
 	border-color: lightgrey;
     color: grey;
 }
+
+.diagnosis-item code {
+    word-break: break-all;
+}
+
+.diagnosis-item ul > li {
+    padding-top: 0.3em;
+}
diff --git a/src/views/diagnosis/diagnosis_show.ms b/src/views/diagnosis/diagnosis_show.ms
index c5f3759c..f5edac5a 100644
--- a/src/views/diagnosis/diagnosis_show.ms
+++ b/src/views/diagnosis/diagnosis_show.ms
@@ -37,11 +37,11 @@
     <ul class="list-group" style="margin-bottom: 0px">
         <p>{{t 'last_ran' }} {{formatRelative time day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}</p>
         {{#items}}
-        <li class="list-group-item alert alert-{{status}} alert-{{status}}-yo clearfix">
+        <li class="list-group-item alert alert-{{status}} alert-{{status}}-yo clearfix diagnosis-item">
             {{#if icon}}
             <span class="fa-fw fa-{{icon}}"></span>
             {{/if}}
-            {{summary}}
+            {{{summary}}}
             {{#if ignored}}
             <button class="btn btn-sm btn-default pull-right" data-action="unignore" data-filter-args="{{ filter_args }}"><span class="fa-fw fa-bell"></span> {{t 'unignore'}}</button>
             {{else}}
@@ -51,9 +51,9 @@
             {{/if}}
             {{#if details}}
             <a role="button" class="btn btn-sm btn-default pull-right" data-toggle="collapse" href="#details-{{../id}}-{{@index}}" aria-expanded="false" aria-controls="details-{{../id}}-{{@index}}"><span class="fa-fw fa-level-down"></span>{{t 'details'}}</a>
-            <div class="collapse" id="details-{{../id}}-{{@index}}">
+            <div class="collapse diagnosis-details" id="details-{{../id}}-{{@index}}">
                 <ul>
-                {{#details}}<li>{{.}}</li>{{/details}}
+                {{#details}}<li>{{{.}}}</li>{{/details}}
                 </ul>
             </div>
             {{/if}}