refactor(ui): title alignment is logo aware

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);
     }

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={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
-        <div className='title'>{projectData.title}</div>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <BackstageClock timeformat={timeformat} />
       </div>
 

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);
   }

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={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
-        <div className='title'>{projectData.title}</div>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <CountdownClock />
       </div>
 

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);
   }

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={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
-        <div className='title'>{projectData.title}</div>
+          {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'])}>

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);
   }

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={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
-        <div className='title'>{projectData.title}</div>
+          {projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
+          <div className='title'>{projectData.title}</div>
+        </div>
         <TimelineClock timeformat={timeformat} />
       </div>