Improve card header layout to match the latest Jenkins UI changes.

Author: uhafner

src/main/resources/bootstrap5/card.jelly

@@ -31,10 +31,11 @@
   <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
 
   <div class="card ${class}">
-    <div class="card-body ${bodyClass}">
-      <div class="card-title">
-        ${title}
-
+    <div class="card-header">
+      <div class="d-flex align-items-center">
+        <span class="card-header-title">
+          ${title}
+        </span>
         <span class="icon-border">
           <j:if test="${pngIcon!=null}">
             <img src="${pngIcon}" class="icon-right"/>
@@ -44,8 +45,9 @@
                          class="icon-right"/>
           </j:if>
         </span>
-
       </div>
+    </div>
+    <div class="card-body ${bodyClass}">
       <d:invokeBody/>
     </div>
   </div>

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

@@ -51,10 +51,15 @@ pre {
     font-size: inherit;
 }
 
-.card-title {
-    font-size: 1.2rem;
+.card-header {
+    font-size: 1.1rem;
     font-weight: 500;
     margin-bottom: 1.5rem;
+    background: var(--item-background--hover);
+}
+
+.card-header-title {
+    margin-right: auto;
 }
 
 .icon-right  {