Merge pull request #16985 from NetoDevel/feature/netodevel-layout-result-tests

Fix card layout in Dev UI

Author: gsmet

extensions/vertx-http/deployment/src/main/resources/dev-static/css/dev-console.css

@@ -101,3 +101,7 @@ h1 {
     overflow-y: auto;
     overflow-x: hidden;
 }
+
+.guide-padding-right {
+    padding-right: 0.25rem;
+}

extensions/vertx-http/deployment/src/main/resources/dev-templates/tags/actionableExtension.html

@@ -1,10 +1,16 @@
 <div class="col mb-4">
     <div class="card h-100 shadow">
-        <div class="card-header bg-primary text-light">
-            {it['name']}
-            {#if it['metadata'] && it['metadata']['guide']}
-            <a href="{it['metadata']['guide']}" class="text-light float-right" title="Guide"><i class="fa fa-book"></i></a>
-            {/if}
+        <div class="card-header bg-primary text-light guide-padding-right">
+            <div class="row">
+                <div class="col-md-10">
+                    {it['name']}
+                </div>
+                <div class="col-md-1">
+                    {#if it['metadata'] && it['metadata']['guide']}
+                    <a href="{it['metadata']['guide']}" class="text-light float-right" title="Guide"><i class="fa fa-book"></i></a>
+                    {/if}
+                </div>
+            </div>
         </div>
         <div class="card-body">
             <p class="card-text">

extensions/vertx-http/deployment/src/main/resources/dev-templates/tags/nonActionableExtension.html

@@ -1,11 +1,17 @@
 {#if it['metadata'] && it['metadata']['unlisted'] != true}
 <div class="col mb-4">
     <div class="card h-100">
-        <div class="card-header">
-            {it['name']}
-            {#if it['metadata'] && it['metadata']['guide']}
-            <a href="{it['metadata']['guide']}" class="text-muted float-right" title="Guide"><i class="fa fa-book"></i></a>
-            {/if}
+        <div class="card-header guide-padding-right">
+            <div class="row">
+                <div class="col-md-10">
+                    {it['name']}
+                </div>
+                <div class="col-md-1">
+                    {#if it['metadata'] && it['metadata']['guide']}
+                    <a href="{it['metadata']['guide']}" class="text-muted float-right" title="Guide"><i class="fa fa-book"></i></a>
+                    {/if}
+                </div>
+            </div>
         </div>
         <div class="card-body">
             <p class="card-text">