refactor(timer): allow multiline secondary text

apps/client/src/views/editor/pip-timer/PipTimer.scss

@@ -37,7 +37,7 @@
 
     .timer {
       opacity: 1;
-      font-family: var(--timer-font, $viewer-font-family);
+      font-family: $viewer-font-family;
       color: var(--timer-colour, $ui-white);
       line-height: 0.9em;
       text-align: center;
@@ -72,17 +72,17 @@
 
   .secondary {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    max-height: 100%;
+    height: auto;
 
     margin-top: 0.125em;
     padding-block: 0.125em;
 
     font-weight: 600;
     text-align: center;
-    color: var(--external-color-override, $external-color);
+    color: $external-color;
     letter-spacing: 0.5px;
-    line-height: 1em;
+    line-height: 1;
     transition-property: opacity, height;
     transition-duration: $viewer-transition-time;
     border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent);

apps/client/src/views/editor/pip-timer/PipTimer.tsx

@@ -63,7 +63,7 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
-  const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
+  const timerFontSize = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
   };
@@ -84,11 +84,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
         >
           {display}
         </div>
-        <div
-          className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}
-          style={{ fontSize: `${externalFontSize}vw` }}
-        >
-          {secondaryContent}
+        <div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
+          <FitText mode='multi' min={12} max={256}>
+            {secondaryContent}
+          </FitText>
         </div>
       </div>