From 2050735014378b9e352b0e6d49b711f18bcd14f8 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 2 Aug 2026 12:13:41 +0200
Subject: [PATCH] refactor(ui): title alignment is logo aware

---
 apps/client/src/views/backstage/Backstage.scss  | 17 +++++++++++++++++
 apps/client/src/views/backstage/Backstage.tsx   |  6 ++++--
 apps/client/src/views/countdown/Countdown.scss  | 12 ++++++++++++
 apps/client/src/views/countdown/Countdown.tsx   |  7 +++++--
 apps/client/src/views/studio/Studio.scss        | 12 ++++++++++++
 apps/client/src/views/studio/Studio.tsx         |  6 ++++--
 .../client/src/views/timeline/TimelinePage.scss | 12 ++++++++++++
 apps/client/src/views/timeline/TimelinePage.tsx |  7 +++++--
 8 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/views/backstage/Backstage.scss b/apps/client/src/views/backstage/Backstage.scss
index a02226a16..8260d42d9 100644
--- a/apps/client/src/views/backstage/Backstage.scss
+++ b/apps/client/src/views/backstage/Backstage.scss
@@ -39,9 +39,21 @@
     font-size: $header-font-size;
     font-weight: 600;
     display: flex;
+    align-items: center;
     gap: 1rem;
   }
 
+  .project-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .project-header__brand--without-logo {
+    align-self: baseline;
+  }
+
   .logo {
     max-width: min(200px, 20vw);
   }
@@ -195,10 +207,15 @@
 
     .project-header {
       flex-direction: column;
+      align-items: flex-start;
       position: relative;
       gap: 0.5rem;
     }
 
+    .project-header__brand--without-logo {
+      align-self: flex-start;
+    }
+
     .logo img {
       height: min(50px, 10vh);
     }
diff --git a/apps/client/src/views/backstage/Backstage.tsx b/apps/client/src/views/backstage/Backstage.tsx
index 85e18bf7c..87aa19f73 100644
--- a/apps/client/src/views/backstage/Backstage.tsx
+++ b/apps/client/src/views/backstage/Backstage.tsx
@@ -107,8 +107,10 @@ function Backstage({ events, customFields, projectData, isMirrored, settings }:
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <ViewParamsEditor target={OntimeView.Backstage} viewOptions={backstageOptions} />
       <div className='project-header'>
-        {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
-        <div className='title'>{projectData.title}</div>
+        <div className={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <BackstageClock timeformat={timeformat} />
       </div>
 
diff --git a/apps/client/src/views/countdown/Countdown.scss b/apps/client/src/views/countdown/Countdown.scss
index f36f03bca..e1bd75235 100644
--- a/apps/client/src/views/countdown/Countdown.scss
+++ b/apps/client/src/views/countdown/Countdown.scss
@@ -23,9 +23,21 @@ $item-height: 3.5rem;
     font-size: $header-font-size;
     font-weight: 600;
     display: flex;
+    align-items: center;
     gap: 1rem;
   }
 
+  .project-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .project-header__brand--without-logo {
+    align-self: baseline;
+  }
+
   .logo {
     max-width: min(200px, 20vw);
   }
diff --git a/apps/client/src/views/countdown/Countdown.tsx b/apps/client/src/views/countdown/Countdown.tsx
index 9db4cce6e..a0962c3d1 100644
--- a/apps/client/src/views/countdown/Countdown.tsx
+++ b/apps/client/src/views/countdown/Countdown.tsx
@@ -20,6 +20,7 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
+import { cx } from '../../common/utils/styleUtils';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
@@ -80,8 +81,10 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
     <div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
       <ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
       <div className='project-header'>
-        {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
-        <div className='title'>{projectData.title}</div>
+        <div className={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <CountdownClock />
       </div>
 
diff --git a/apps/client/src/views/studio/Studio.scss b/apps/client/src/views/studio/Studio.scss
index 29ffb2a38..87b8e4ca7 100644
--- a/apps/client/src/views/studio/Studio.scss
+++ b/apps/client/src/views/studio/Studio.scss
@@ -35,9 +35,21 @@
     font-size: $header-font-size;
     font-weight: 600;
     display: flex;
+    align-items: center;
     gap: 1rem;
   }
 
+  .project-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .project-header__brand--without-logo {
+    align-self: baseline;
+  }
+
   .logo {
     max-width: min(200px, 20vw);
   }
diff --git a/apps/client/src/views/studio/Studio.tsx b/apps/client/src/views/studio/Studio.tsx
index 53fd4014e..536d2f1df 100644
--- a/apps/client/src/views/studio/Studio.tsx
+++ b/apps/client/src/views/studio/Studio.tsx
@@ -43,8 +43,10 @@ function Studio({ customFields, projectData, isMirrored, settings, viewSettings
       <ViewParamsEditor target={OntimeView.StudioClock} viewOptions={studioOptions} />
 
       <div className='project-header'>
-        {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
-        <div className='title'>{projectData.title}</div>
+        <div className={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
       </div>
 
       <div className={cx(['studio-contents', hideCards && 'studio-contents--onecol'])}>
diff --git a/apps/client/src/views/timeline/TimelinePage.scss b/apps/client/src/views/timeline/TimelinePage.scss
index 8ffe25b84..81a90efac 100644
--- a/apps/client/src/views/timeline/TimelinePage.scss
+++ b/apps/client/src/views/timeline/TimelinePage.scss
@@ -20,9 +20,21 @@
     font-size: $header-font-size;
     font-weight: 600;
     display: flex;
+    align-items: center;
     gap: 1rem;
   }
 
+  .project-header__brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  .project-header__brand--without-logo {
+    align-self: baseline;
+  }
+
   .logo {
     max-width: min(200px, 20vw);
   }
diff --git a/apps/client/src/views/timeline/TimelinePage.tsx b/apps/client/src/views/timeline/TimelinePage.tsx
index cff50cd06..27c9fc5ef 100644
--- a/apps/client/src/views/timeline/TimelinePage.tsx
+++ b/apps/client/src/views/timeline/TimelinePage.tsx
@@ -8,6 +8,7 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
 import { useSelectedEventId } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
+import { cx } from '../../common/utils/styleUtils';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../common/loader/Loader';
@@ -59,8 +60,10 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
     <div className='timeline' data-testid='timeline-view'>
       <ViewParamsEditor target={OntimeView.Timeline} viewOptions={progressOptions} />
       <div className='project-header'>
-        {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
-        <div className='title'>{projectData.title}</div>
+        <div className={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <TimelineClock timeformat={timeformat} />
       </div>