style: recompose layout

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -9,15 +9,15 @@
 }
 
 .statusBar {
-  position: absolute;
-  bottom: 0;
+  position: sticky;
+  top: 0;
   width: 100%;
   background-color: $gray-1350;
   z-index: 2;
 
   padding: 0.5rem 1rem;
-  border-top: 1px solid $white-10;
-  box-shadow: $large-bottom-drawer-shadow;
+  border-bottom: 1px solid $white-10;
+  box-shadow: $large-top-drawer-shadow;
 
   display: grid;
   grid-template-areas:
@@ -50,9 +50,10 @@
 
 .title {
   grid-area: title;
-  font-size: 1.5rem;
-  padding-left: 0.5rem;
+  font-size: 1rem;
+  padding-left: 0.25rem;
   display: none;
+  line-height: 1.25em;
 }
 
 .startTime {
@@ -80,8 +81,8 @@
 @media (min-width: $min-tablet) {
   .statusBar {
     grid-template-areas:
-    "playback timer1B timer2B timer3B"
-    "title    timer1A timer2A timer3A";
+    "playback timer1B timer2A timer3A"
+    "title    title   timer2B timer3B";
     row-gap: 0.25rem;
     column-gap: 2rem;
   }

apps/client/src/features/operator/status-bar/StatusBar.tsx

@@ -63,16 +63,6 @@ export default function StatusBar(props: StatusBarProps) {
 
   return (
     <div className={styles.statusBar}>
-      <span className={styles.title}>{projectTitle}</span>
-      <div className={styles.startTime}>
-        <span className={styles.label}>Scheduled start</span>
-        <span className={styles.timer}>{getTimeStart()}</span>
-      </div>
-      <div className={styles.endTime}>
-        <span className={styles.label}>Scheduled end</span>
-        <span className={styles.timer}>{getTimeEnd()}</span>
-      </div>
-
       {PlaybackIconComponent}
       <div className={styles.timeNow}>
         <span className={styles.label}>Time now</span>
@@ -86,6 +76,16 @@ export default function StatusBar(props: StatusBarProps) {
         <span className={styles.label}>Running timer</span>
         <span className={styles.timer}>{runningTime}</span>
       </div>
+
+      <span className={styles.title}>{projectTitle}</span>
+      <div className={styles.startTime}>
+        <span className={styles.label}>Scheduled start</span>
+        <span className={styles.timer}>{getTimeStart()}</span>
+      </div>
+      <div className={styles.endTime}>
+        <span className={styles.label}>Scheduled end</span>
+        <span className={styles.timer}>{getTimeEnd()}</span>
+      </div>
     </div>
   );
 }