#1975: Fix block with long dynamic titles

* Fix overflow on block with long dynamic titles * Formatting
area17 · Dec 6, 2022 · 2cce9c1 · 2cce9c1
1 parent 59d2248
commit 2cce9c1
Showing 1 changed file with 23 additions and 3 deletions.
diff --git 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