From 2cce9c13a0426b97c7333b20b3aa2c4200a1b6c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20V=C3=A9zina?= <patrick@croustille.io>
Date: Tue, 6 Dec 2022 16:59:51 -0500
Subject: [PATCH] #1975: Fix block with long dynamic titles

* Fix overflow on block with long dynamic titles

* Formatting
---
 .../js/components/blocks/BlockEditorItem.vue  | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/js/components/blocks/BlockEditorItem.vue b/frontend/js/components/blocks/BlockEditorItem.vue
index c549fd31d..e399f37a8 100755
--- a/frontend/js/components/blocks/BlockEditorItem.vue
+++ b/frontend/js/components/blocks/BlockEditorItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="block" :class="blockClasses">
-    <div class="block__header" @dblclick.prevent="toggleExpand()">
+    <div class="block__header" @dblclick.prevent="toggleExpand()" ref="header">
       <span v-if="withHandle" class="block__handle"></span>
       <div class="block__toggle">
         <a17-dropdown :ref="moveDropdown" class="f--small" position="bottom-left" v-if="withMoveDropdown" :maxHeight="270">
@@ -10,7 +10,12 @@
           </div>
         </a17-dropdown>
         <span class="block__counter f--tiny" v-else>{{ index + 1 }}</span>
-        <span class="block__title">{{ blockTitle }}</span>
+        <span
+          class="block__title"
+          :style="{
+            'max-width': titleMaxWidth
+          }"
+        >{{ blockTitle }}</span>
       </div>
       <div class="block__actions">
         <slot name="block-actions"/>
@@ -77,7 +82,8 @@
         visible: false,
         hover: false,
         withMoveDropdown: true,
-        withAddDropdown: true
+        withAddDropdown: true,
+        titleMaxWidth: null
       }
     },
     filters: a17VueFilters,
@@ -159,8 +165,22 @@
 
         const blockFieldName = this.blockFieldName(fieldName)
         return this.fieldValueByName(blockFieldName)
+      },
+      updateTitleMaxWidth () {
+        if (this.titleFieldValue && this.$refs.header) {
+          this.titleMaxWidth = `calc(${this.$refs.header.offsetWidth * 0.45}px - 5ch)`
+        } else {
+          this.titleMaxWidth = '45%'
+        }
       }
     },
+    mounted () {
+      this.updateTitleMaxWidth()
+      window.addEventListener('resize', this.updateTitleMaxWidth)
+    },
+    unmounted () {
+      window.removeEventListener('resize', this.updateTitleMaxWidth)
+    },
     beforeMount () {
       if (!this.$slots['dropdown-numbers']) this.withMoveDropdown = false
       if (!this.$slots['dropdown-add']) this.withAddDropdown = false