Closes #4975.

- Better alignment of elements in TC.
- Stubbed display for :title to be applied to TC's.

src/plugins/timeConductor/Conductor.vue

@@ -23,6 +23,7 @@
 <div
     ref="timeConductorOptionsHolder"
     class="c-compact-tc is-expanded"
+    :title="titleStr"
     :class="[
         { 'is-zooming': isZooming },
         { 'is-panning': isPanning },
@@ -32,6 +33,10 @@
 >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <!-- TODO - NEED TO ADD MODE, CLOCK AND TIMESYSTEM VIEW ONLY INFORMATION HERE -->
+    <div class="c-compact-tc__current-state">
+        {{ modeStr }} {{ clockStr }} {{ timeSystemStr }}
+    </div>
+
     <conductor-inputs-fixed
         v-if="isFixed"
         :input-bounds="viewBounds"
@@ -112,7 +117,11 @@ export default {
             showDatePicker: false,
             altPressed: false,
             isPanning: false,
-            isZooming: false
+            isZooming: false,
+            modeStr: (this.openmct.time.clock() === undefined) ? 'Fixed' : 'RT',
+            clockStr: 'Local',
+            timeSystemStr: 'UTC',
+            titleStr: 'RT LOCAL UTC -00:30:00 <> +00:00:15'
         };
     },
     mounted() {

src/plugins/timeConductor/conductor.scss

@@ -380,13 +380,18 @@
         @include ellipsize();
         color: $colorTimeRealtimeFg;
         flex: 0 1 auto;
+        line-height: 100%;
 
         &:before {
-            font-size: 0.85em;
+            font-size: 0.75em;
             margin-right: $interiorMarginSm;
         }
     }
 
+    &__current-state {
+        text-transform: uppercase;
+    }
+
     &__current-update {
         @include ellipsize();
         flex: 0 1 auto;
@@ -433,7 +438,7 @@
             color: $colorTimeFixedFg;
         }
 
-        &__bounds__valuelue {
+        &__bounds__value {
             color: $colorTimeFixedFg;
         }
 
@@ -469,7 +474,7 @@
             color: $colorTimeRealtimeFg;
         }
 
-        &__bounds__valuelue {
+        &__bounds__value {
             color: $colorTimeRealtimeFg;
         }
 

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -23,6 +23,7 @@
 <div
     ref="timeConductorOptionsHolder"
     class="c-compact-tc"
+    :title="titleStr"
     :class="[
         isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
         { 'is-expanded' : independentTCEnabled }
@@ -95,7 +96,8 @@ export default {
             viewBounds: {
                 start: bounds.start,
                 end: bounds.end
-            }
+            },
+            titleStr: 'RT LOCAL UTC -00:30:00 <> +00:00:15'
         };
     },
     computed: {