From 15b674f3d1e3eb8080978539a274860ac37a74f8 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 19 Dec 2024 19:17:28 -0800
Subject: [PATCH] Closes #7936 - Fix left and right `alignmentData` offsets
 that were not being applied to the correct element.

---
 src/ui/components/TimeSystemAxis.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue
index b26ff8cf0a..a4b4ebeff2 100644
--- a/src/ui/components/TimeSystemAxis.vue
+++ b/src/ui/components/TimeSystemAxis.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div ref="axisHolder" class="c-timesystem-axis">
+  <div ref="axisHolder" class="c-timesystem-axis" :style="alignmentStyle">
     <div class="c-timesystem-axis__mb-line" :style="nowMarkerStyle"></div>
     <svg :width="svgWidth" :height="svgHeight">
       <g class="axis" :transform="axisTransform"></g>
@@ -81,6 +81,7 @@ export default {
     const svgHeight = ref(0);
     const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
     const alignmentOffset = ref(0);
+    const alignmentStyle = ref({ margin: `0 0 0 0` });
     const nowMarkerStyle = reactive({
       height: '0px',
       left: '0px'
@@ -103,6 +104,7 @@ export default {
       svgHeight,
       axisTransform,
       alignmentOffset,
+      alignmentStyle,
       nowMarkerStyle,
       openmct
     };
@@ -111,14 +113,13 @@ export default {
     alignmentData: {
       handler() {
         let leftOffset = 0;
+        const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
         if (this.alignmentData.leftWidth) {
           leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
         }
-        this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, ${TIME_AXIS_LINE_Y})`;
-
-        const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
-        this.alignmentOffset =
-          this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset;
+        this.alignmentStyle = {
+          margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
+        };
         this.refresh();
       },
       deep: true
@@ -173,19 +174,18 @@ export default {
       const nowMarker = this.$el.querySelector('.c-timesystem-axis__mb-line');
       if (nowMarker) {
         nowMarker.classList.remove('hidden');
-        // const markerH = this.contentHeight - TIME_AXIS_LINE_Y;
         this.nowMarkerStyle.height = this.contentHeight - TIME_AXIS_LINE_Y + 'px';
         this.nowMarkerStyle.top = TIME_AXIS_LINE_Y + 'px';
         const nowTimeStamp = this.openmct.time.now();
         const now = this.xScale(nowTimeStamp);
-        this.nowMarkerStyle.left = `${now + this.alignmentOffset}px`;
-        if (now > this.width) {
+        this.nowMarkerStyle.left = `${now}px`;
+        if (now < 0 || now > this.width) {
           nowMarker.classList.add('hidden');
         }
       }
     },
     setDimensions() {
-      this.width = this.axisHolder.clientWidth - (this.alignmentOffset ?? 0);
+      this.width = this.axisHolder.clientWidth;
       this.height = Math.round(this.axisHolder.getBoundingClientRect().height);
 
       if (this.useSVG) {