Editor Viewer Bar: Limit media name characters

ui/src/layout-editor/main.js

@@ -2423,6 +2423,37 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
               draggableData.originalHeight,
             );
 
+            // Limit name for an element
+            const limitStringLength = function(
+              originalString,
+              maxLength,
+            ) {
+              const words =
+                originalString.split(',').map((word) => word.trim());
+              let result = '';
+
+              for (let word of words) {
+                // Check if single words exceeds max lenght
+                // and trim it
+                if (word.length > maxLength) {
+                  // If it does, trim it to maxLength
+                  word = word.slice(0, maxLength);
+                }
+
+                // Check if adding the next word would exceed the maxLength
+                if (
+                  (result + (result ? ', ' : '') + word).length <=
+                  maxLength
+                ) {
+                  result += (result ? ', ' : '') + word;
+                } else {
+                  break;
+                }
+              }
+
+              return result;
+            };
+
             // Element options
             const elementOptions = {
               id: draggableData.templateId,
@@ -2437,7 +2468,10 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
               extendsOverride: draggableData.extendsOverride,
               extendsOverrideId: draggableData.extendsOverrideId,
               mediaId: draggableData.mediaId,
-              mediaName: draggableData.cardTitle,
+              mediaName: limitStringLength(
+                draggableData.cardTitle,
+                95,
+              ),
               isVisible: draggableData.isVisible,
             };
 

ui/src/style/bottombar.scss

@@ -107,9 +107,21 @@
                         text-overflow: ellipsis;
                     }
 
+
+                    & > .mediaTemplate {
+                        white-space: nowrap;
+                    }
+
                     & > .mediaInfo {
                         display: inline-flex;
                         gap: 6px;
+                        overflow: hidden;
+
+                        .mediaInfoName {
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
                     }
                 }
             }

ui/src/templates/bottombar-viewer.hbs

@@ -12,7 +12,7 @@
         {{else eq object.type "element"}}
             <div class="info">
                 <div class="label-name">
-                    <strong>{{objectTypeName}}</strong> | <div title="{{trans.templateName}}">{{object.template.title}}</div>
+                    <strong>{{objectTypeName}}</strong> | <div class="mediaTemplate" title="{{trans.templateName}}">{{object.template.title}}</div>
                     {{#if object.elementName}} - <div class="name" title="{{trans.elementName}}">"{{object.elementName}}"</div>{{/if}}
                     {{#if object.elementMediaInfo}}
                         - <div class="mediaInfo">[