fix titlebar text overflow

Author: OpenHypervideo

src/player/modules/Titlebar/style.css

@@ -2,6 +2,8 @@
     order: 0;
     flex: 0 1 40px;
     align-self: auto;
+    display: flex;
+    align-items: center;
     position: relative;
     background: var(--primary-bg-color);
     width: 100%;
@@ -42,7 +44,7 @@
 }
 
 .titlebarViewMode {
-    float: left;
+    flex-shrink: 0;
 }
 
 .titlebarViewMode.hidden {
@@ -111,16 +113,20 @@
 }
 
 .titlebar .titlebarTitle {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100%;
+    padding-left: 10px;
     color: var(--primary-fg-color);
-    z-index: -1;
+}
+
+.titlebar .titlebarTitle > span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .titlebar.editActive .titlebarTitle {
@@ -133,6 +139,7 @@
 
 .titlebar .titlebarTitle .hypervideoEditButton,
 .titlebar .titlebarTitle .hypervideoDeleteButton {
+    flex-shrink: 0;
     opacity: 0.7;
     display: none;
 }
@@ -165,7 +172,7 @@
 }
 
 .titlebar .titlebarActionButtonContainer {
-    float: right;
+    flex-shrink: 0;
 }
 
 .frametrail-body.inFullscreen .titlebar .logoutButton {