fix: Implemented text truncation for long strings to prevent UI distortion

Author: pnrgenc

frontend/express/public/javascripts/countly/vue/templates/content/content-header.html

@@ -16,7 +16,7 @@
         </div>
         <div class="cly-vue-content-builder__layout-header__info">
             <div class="cly-vue-content-builder__layout-header__info-title cursor-pointer" @dblclick="handleDoubleClick">
-                <h4 v-if="!isEditing">{{ localTitle }}</h4>
+                <h4 class="has-ellipsis" v-tooltip="localTitle && localTitle.length > 30 ? localTitle : ''" v-if="!isEditing">{{ localTitle }}</h4>
                 <el-input
                     v-else
                     class="bu-mb-2 cly-vue-content-builder__layout-header__info-title__input"

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4336,7 +4336,7 @@
           &__left {
             display: flex;
             align-items: center;
-            width: 350px;
+            // width: 350px;
           }
 
           &__icon {
@@ -4366,6 +4366,7 @@
           &__info-title {
             h4 {
               margin: 0;
+              max-width: 400px;
             }
             &__input {
                 width: 200px;