refactor(ui): rundown title UI polish

apps/client/src/features/overview/composite/TitleOverview.module.scss

@@ -1,14 +1,43 @@
-.title {
+.titleOverview {
-  font-size: 1.75rem;
+  flex: 0 1 18rem;
-  font-weight: 600;
+  min-width: 0;
-  color: $ui-white;
+  width: 18rem;
-  line-height: 1;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.project,
+.rundown {
   @include ellipsis-overflow;
 }
 
-.description {
+.project {
-  font-size: 1rem;
   color: $secondary-text-gray;
+  font-size: 0.75rem;
   font-weight: 400;
-  @include ellipsis-overflow;
+  letter-spacing: 0.04em;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.rundown {
+  color: $ui-white;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+// A lone title should still read as the primary piece of context.
+.project:only-child,
+.rundown:only-child {
+  color: $ui-white;
+  font-size: 1.5rem;
+}
+
+.project:only-child {
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
 }

apps/client/src/features/overview/composite/TitleOverview.tsx

@@ -8,14 +8,17 @@ export default function TitleOverview() {
   const { data: projectData } = useProjectData();
   const { data: rundownData } = useRundownAuxData();
 
-  if (!projectData.title && !rundownData.title) {
+  const projectTitle = projectData.title.trim();
+  const rundownTitle = rundownData.title.trim();
+
+  if (!projectTitle && !rundownTitle) {
     return null;
   }
 
   return (
-    <div>
+    <div className={style.titleOverview}>
-      <div className={style.title}>{projectData.title}</div>
+      {projectTitle && <div className={style.project}>{projectTitle}</div>}
-      <div className={style.description}>{rundownData.title}</div>
+      {rundownTitle && <div className={style.rundown}>{rundownTitle}</div>}
     </div>
   );
 }