style fix: handle long titles

long titles would overflow
- list editor
- info titles
- backstage view
- public view

client/src/common/components/views/Paginator.module.css

@@ -37,6 +37,10 @@
 
 .entryTitle {
   align-self: center;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .entryPast,

client/src/features/editors/list/EventBlock.module.css

@@ -144,6 +144,9 @@
   border-radius: 4px;
   width: 100%;
   display: block;
+
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .oscLabel {

client/src/features/info/Info.module.css

@@ -6,6 +6,8 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   padding: 8px;
+
+  max-width: 90%;
 }
 
 .main {
@@ -13,6 +15,8 @@
   color: #ff7597;
   display: flex;
   justify-content: space-between;
+
+  max-width: 90%;
 }
 
 .header {
@@ -24,6 +28,12 @@
   justify-content: space-between;
 }
 
+.labelContainer {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .label,
 .emptyLabel {
   padding: 0;
@@ -47,6 +57,8 @@
 
 .notes {
   color: #d69e2e;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .if {

client/src/features/info/InfoTitle.jsx

@@ -26,19 +26,19 @@ export default function InfoTitle(props) {
 
       {!collapsed && (
         <>
-          <div>
+          <div className={style.labelContainer}>
             <span className={noTitl ? style.emptyLabel : style.label}>
               Title
             </span>
             {data.title}
           </div>
-          <div>
+          <div className={style.labelContainer}>
             <span className={noPres ? style.emptyLabel : style.label}>
               Presenter
             </span>
             {data.presenter}
           </div>
-          <div>
+          <div className={style.labelContainer}>
             <span className={noSubt ? style.emptyLabel : style.label}>
               Subtitle
             </span>

client/src/features/viewers/backstage/StageManager.module.css

@@ -55,6 +55,8 @@
 .todayContainer {
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1vh 2vw;
+
+  overflow: hidden;
 }
 
 .clockContainer,
@@ -163,7 +165,7 @@
 
 .countdownContainer {
   grid-area: clck;
-    border-radius: 1vw 1vw 0 0;
+  border-radius: 1vw 1vw 0 0;
 }
 
 .clock {

client/src/features/viewers/foh/Public.module.css

@@ -55,6 +55,8 @@
 .todayContainer {
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1vh 2vw;
+
+  overflow: hidden;
 }
 
 .clockContainer,