refactor: use jenkins cards over bootstrap cards

Signed-off-by: Lewis Birks <22620804+lewisbirks@users.noreply.github.com>

Author: lewisbirks

src/main/resources/io/jenkins/plugins/bootstrap5/MessagesViewModel/index.jelly

@@ -1,48 +1,43 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:bs="/bootstrap5">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
 
   <st:header name="Content-Type" value="text/html;charset=UTF-8"/>
 
-  <bs:page it="${it}">
+  <l:layout title="${it.displayName}" norefresh="true" nogrid="true">
+    <st:include it="${it.owner}" page="sidepanel.jelly"/>
 
-    <j:if test="${size(it.errorMessages) > 0}">
-      <div class="row py-3">
-        <div class="col">
+    <l:main-panel>
 
-          <bs:card title="${%Error Messages}" fontAwesomeIcon="triangle-exclamation">
-            <pre>
-              <samp id="errors" class="log-output">
+      <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
+      <l:app-bar title="${title}"/>
+
+      <div class="${class}">
+        <j:if test="${size(it.errorMessages) > 0}">
+          <l:card title="${%Error Messages}">
+            <div class="bs5-console-output">
+              <pre id="errors">
                 <j:forEach var="message" items="${it.errorMessages}">
                   <div>
                     ${message}
                   </div>
                 </j:forEach>
-              </samp>
-            </pre>
-          </bs:card>
-        </div>
-      </div>
-    </j:if>
-
-    <div class="row py-3">
-      <div class="col">
-
-        <bs:card title="${%Information Messages}" fontAwesomeIcon="circle-info">
-
-          <pre>
-            <samp id="info" class="log-output">
+              </pre>
+            </div>
+          </l:card>
+        </j:if>
+
+        <l:card title="${%Information Messages}">
+          <div class="bs5-console-output">
+            <pre id="info">
               <j:forEach var="message" items="${it.infoMessages}">
                 <div>
                   ${message}
                 </div>
               </j:forEach>
-            </samp>
-          </pre>
-        </bs:card>
-
+            </pre>
+          </div>
+        </l:card>
       </div>
-    </div>
-
-  </bs:page>
-
+    </l:main-panel>
+  </l:layout>
 </j:jelly>

src/main/webapp/css/jenkins-style.css

@@ -155,3 +155,40 @@ pre {
     backdrop-filter: contrast(0.6) brightness(2.4) saturate(2) blur(15px);
     box-shadow: 0 0 8px 2px rgba(0,0,30,.05), 0 0 1px 1px rgba(0,0,20,.025), 0 10px 20px rgba(0,0,20,.15);
 }
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+/* Console output                                                                                                      */
+/* ------------------------------------------------------------------------------------------------------------------- */
+
+.bs5-console-output {
+    overflow-y: auto;
+    margin: 0 -1rem -1rem;
+    padding: 0 1rem 1rem;
+
+    pre {
+        background: transparent;
+        border: none;
+        margin: 0;
+        padding: 0;
+        line-height: 1.75;
+        font-size: var(--font-size-sm);
+        overflow-wrap: break-word;
+
+        a {
+            overflow-wrap: break-word;
+        }
+    }
+}
+
+@media (width >= 1000px) {
+    .jenkins-card__content .bs5-console-output {
+        height: 300px;
+    }
+}
+
+@media (width < 1000px) {
+    .jenkins-card__content .bs5-console-output {
+        max-height: 300px;
+    }
+}
+