From 0b8e9837eb25edf7aad7eb30e4e151c6a179923f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Tue, 6 Feb 2024 15:31:54 +0000
Subject: [PATCH] Fix text overflow on multiple places (#2350)

relates to xibosignage/xibo#3328

 - Viewer bottom bar
 - Widget in Playlist view
 - External Playlist editor header
---
 ui/src/style/bottombar.scss           |  8 ++++++++
 ui/src/style/forms.scss               |  2 +-
 ui/src/style/layout-editor.scss       |  3 +++
 ui/src/style/playlist-editor.scss     | 17 ++++++++++++++++-
 ui/src/templates/bottombar-viewer.hbs | 16 ++++++++--------
 5 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/ui/src/style/bottombar.scss b/ui/src/style/bottombar.scss
index 29b875773b..eb12acf758 100644
--- a/ui/src/style/bottombar.scss
+++ b/ui/src/style/bottombar.scss
@@ -99,6 +99,14 @@
 
                 .label-name {
                     line-height: 1;
+                    display: flex;
+                    gap: 8px;
+
+                    & > .name {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
             }
 
diff --git a/ui/src/style/forms.scss b/ui/src/style/forms.scss
index b61d2918c0..055b30329f 100644
--- a/ui/src/style/forms.scss
+++ b/ui/src/style/forms.scss
@@ -428,12 +428,12 @@
     text-align: center;
     padding: 6px;
     background-color: $xibo-color-primary-l60;
+    color: $xibo-color-primary-l5;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     .widget-info-name {
-        color: $xibo-color-primary-l5;
         font-weight: bold;
     }
 }
diff --git a/ui/src/style/layout-editor.scss b/ui/src/style/layout-editor.scss
index 9724e96cbb..c3b836b216 100644
--- a/ui/src/style/layout-editor.scss
+++ b/ui/src/style/layout-editor.scss
@@ -82,6 +82,9 @@ body.editor-opened {
 .main-panel, .playlist-panel {
     flex: 1;
 
+    /* Prevent growing more than the allocated space, a fix for overlay in the viewer toolbar */
+    max-width: calc(100% - 320px);
+
     .main-panel-wrapper {
         position: relative;
         height: 100%;
diff --git a/ui/src/style/playlist-editor.scss b/ui/src/style/playlist-editor.scss
index f0d8ce304b..a8e34001d8 100644
--- a/ui/src/style/playlist-editor.scss
+++ b/ui/src/style/playlist-editor.scss
@@ -113,6 +113,9 @@ $timeline-step-height: 22px;
             &--left {
                 display: flex;
                 column-gap: 10px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
 
                 .playlist-info-widgets,
                 .playlist-info-duration {
@@ -132,6 +135,9 @@ $timeline-step-height: 22px;
         line-height: 1;
         font-weight: bold;
         color: $playlist-editor-main-fb-color;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .container-designer {
@@ -366,6 +372,9 @@ $timeline-step-height: 22px;
                     flex: 1;
                     display: flex;
                     flex-direction: column;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .widgetLabel {
@@ -534,7 +543,7 @@ $timeline-step-height: 22px;
 
         .footer-controls {
             background-color: $xibo-color-primary-d60;
-            width: $left-bar-width;
+            min-width: $left-bar-width;
             height: 100%;
             display: flex;
             justify-content: space-evenly;
@@ -570,6 +579,7 @@ $timeline-step-height: 22px;
             color: $xibo-color-neutral-100;
             background-color: $xibo-color-primary;
             flex: 1;
+            width: calc(100% - 140px);
             height: 100%;
             display: flex;
             align-items: center;
@@ -577,6 +587,7 @@ $timeline-step-height: 22px;
 
             .selected-info {
                 color: $xibo-color-neutral-0;
+                max-width: calc(100% - 80px);
                 padding: 0 12px;
                 display: flex;
                 flex-direction: row;
@@ -587,6 +598,7 @@ $timeline-step-height: 22px;
                 }
 
                 .playlist-info-block {
+                    max-width: 50%;
                     &:first-child {
                         margin-right: 8px;
                     }
@@ -598,6 +610,9 @@ $timeline-step-height: 22px;
 
                 .label-name {
                     line-height: 1;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
             }
 
diff --git a/ui/src/templates/bottombar-viewer.hbs b/ui/src/templates/bottombar-viewer.hbs
index 9e3e2419fd..2fd0e42378 100644
--- a/ui/src/templates/bottombar-viewer.hbs
+++ b/ui/src/templates/bottombar-viewer.hbs
@@ -4,27 +4,27 @@
         {{#eq object.type "widget"}}
             <div class="info">
                 {{#ifCond object.widgetName '||' object.moduleName}}
-                    <div class="label-name align-middle d-inline-block">
-                        <strong>{{objectTypeName}}</strong> <span title="{{trans.widgetName}}">{{#if object.widgetName}}"{{object.widgetName}}"{{/if}}</span>
+                    <div class="label-name">
+                        <strong>{{objectTypeName}}</strong> <div class="name" title="{{trans.widgetName}} {{object.widgetName}}">{{#if object.widgetName}}"{{object.widgetName}}"{{/if}}</div>
                     </div>
                 {{/ifCond}}
             </div>
         {{else eq object.type "element"}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> | <span title="{{trans.templateName}}">{{object.template.title}}</span>{{#if object.elementName}} - <span title="{{trans.elementName}}">"{{object.elementName}}"</span>{{/if}}
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong> | <div title="{{trans.templateName}}">{{object.template.title}}</div>{{#if object.elementName}} - <div class="name" title="{{trans.elementName}}">"{{object.elementName}}"</div>{{/if}}
                 </div>
             </div>
         {{else eq object.type "element-group"}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <span title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</span>{{/if}}
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <div class="name" title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</div>{{/if}}
                 </div>
             </div>
         {{else}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> <span title="{{trans.regionName}}">{{#if object.name}}"{{object.name}}"{{/if}}</span>
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong> <div class="name" title="{{trans.regionName}}">{{#if object.name}}"{{object.name}}"{{/if}}</div>
                 </div>
             </div>
         {{/eq}}