Fix reporter chart overflowing block if used in compose

client/web/compose/src/components/PageBlocks/Report/Configurator.vue

@@ -8,7 +8,7 @@
           <b-form-select
             v-model="options.reportID"
             :options="reportOptions"
-            text-field="handle"
+            text-field="label"
             value-field="reportID"
           />
         </b-form-group>
@@ -63,8 +63,8 @@ export default {
   computed: {
     reportOptions () {
       return [
-        { reportID: NoID, handle: this.$t('general:label.none') },
-        ...this.reports,
+        { reportID: NoID, label: this.$t('general:label.none') },
+        ...this.reports.map(r => ({ ...r, label: r.meta.name || r.handle })),
       ]
     },
 

lib/vue/src/components/reporter/Viewers/CReportChart.vue

@@ -1,9 +1,11 @@
 <template>
-  <c-chart
-    v-if="chart"
-    :chart="chart"
-    class="p-1"
-  />
+  <div class="d-flex h-100 position-relative">
+    <c-chart
+      v-if="chart"
+      :chart="chart"
+      class="flex-fill p-1"
+    />
+  </div>
 </template>
 <script>
 import base from './base.vue'

lib/vue/src/components/reporter/Viewers/CReportTable.vue

@@ -50,11 +50,11 @@
             v-for="(c, i) in tabelify.header"
             :key="i"
             class="border-0"
-            :class="{ 'pointer': c.meta.tmp_noSort }"
-            @click="c.meta.tmp_noSort ? undefined : handleSort(c.meta.sortKey)"
           >
             <div
               class="d-flex align-items-center"
+              :class="{ 'pointer': !c.meta.tmp_noSort }"
+              @click="c.meta.tmp_noSort ? undefined : handleSort(c.meta.sortKey)"
             >
               <div
                 v-if="c.column ? c.column.label : ''"
@@ -465,7 +465,7 @@ export default {
           const def = {
             ref,
           }
-  
+
           // Sorting
           const { field, descending } = this.sort
           if (field) {