From a638e5962cbc0d94554e5e26feb01094ca218fe0 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 24 Oct 2021 12:38:57 +0200
Subject: [PATCH] style fix: handle long titles

long titles would overflow
- list editor
- info titles
- backstage view
- public view
---
 .../src/common/components/views/Paginator.module.css |  4 ++++
 .../src/features/editors/list/EventBlock.module.css  |  3 +++
 client/src/features/info/Info.module.css             | 12 ++++++++++++
 client/src/features/info/InfoTitle.jsx               |  6 +++---
 .../viewers/backstage/StageManager.module.css        |  4 +++-
 client/src/features/viewers/foh/Public.module.css    |  2 ++
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/common/components/views/Paginator.module.css b/client/src/common/components/views/Paginator.module.css
index 5e58e99ad..165f568ed 100644
--- a/client/src/common/components/views/Paginator.module.css
+++ b/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,
diff --git a/client/src/features/editors/list/EventBlock.module.css b/client/src/features/editors/list/EventBlock.module.css
index bc7f34764..f74a78ed4 100644
--- a/client/src/features/editors/list/EventBlock.module.css
+++ b/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 {
diff --git a/client/src/features/info/Info.module.css b/client/src/features/info/Info.module.css
index c6c63793d..bfafd4303 100644
--- a/client/src/features/info/Info.module.css
+++ b/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 {
diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx
index 31759057e..c27130bb0 100644
--- a/client/src/features/info/InfoTitle.jsx
+++ b/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>
diff --git a/client/src/features/viewers/backstage/StageManager.module.css b/client/src/features/viewers/backstage/StageManager.module.css
index cf9bad51e..484502503 100644
--- a/client/src/features/viewers/backstage/StageManager.module.css
+++ b/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 {
diff --git a/client/src/features/viewers/foh/Public.module.css b/client/src/features/viewers/foh/Public.module.css
index 4110f9c48..905b6d6e6 100644
--- a/client/src/features/viewers/foh/Public.module.css
+++ b/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,