Sync block wrap styles for compose/reporter

client/web/compose/src/components/PageBlocks/Wrap/Card.vue

@@ -10,8 +10,14 @@
         :class="`border-bottom text-nowrap pr-2 ${headerClass}`"
         :header-text-variant="block.style.variants.headerText"
       >
-        <div v-if="!headerSet">
-          <div class="d-flex">
+        <div
+          v-if="!headerSet"
+          class="d-flex flex-column gap-1"
+        >
+          <div
+            v-if="blockTitle || showOptions"
+            class="d-flex"
+          >
             <h4
               v-if="blockTitle"
               :title="blockTitle"
@@ -52,7 +58,7 @@
           <b-card-text
             v-if="blockDescription"
             :title="blockDescription"
-            class="text-dark text-wrap mt-1"
+            class="text-dark text-wrap"
           >
             {{ blockDescription }}
           </b-card-text>

client/web/compose/src/components/PageBlocks/Wrap/Plain.vue

@@ -10,11 +10,15 @@
       >
         <div
           v-if="!headerSet"
+          class="d-flex flex-column gap-1"
         >
           <div
+            v-if="blockTitle || showOptions"
             class="d-flex"
           >
             <h4
+              v-if="blockTitle"
+              :title="blockTitle"
               class="text-truncate mb-0"
             >
               {{ blockTitle }}
@@ -51,7 +55,7 @@
 
           <b-card-text
             v-if="blockDescription"
-            class="text-dark text-wrap mt-1"
+            class="text-dark text-wrap"
           >
             {{ blockDescription }}
           </b-card-text>

client/web/reporter/src/components/Report/Blocks/index.vue

@@ -9,19 +9,18 @@
     >
       <div
         v-if="block.title || block.description"
-        class="p-3 border-bottom"
+        class="d-flex flex-column p-3 border-bottom gap-1"
       >
-        <h5
+        <h4
           v-if="block.title"
           class="text-primary text-truncate mb-0"
         >
           {{ block.title }}
-        </h5>
+        </h4>
 
         <b-card-text
           v-if="block.description"
-          class="text-dark text-truncate"
-          :class="{ 'mt-1': block.title }"
+          class="text-dark text-wrap"
         >
           {{ block.description }}
         </b-card-text>