From e2092a7b17dc3895bd1aab80e9fbbe8eaa10673d Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 12 Jul 2024 15:46:07 -0700
Subject: [PATCH] fix css for bounds single inputs

---
 .../timeConductor/DateTimePopupFixed.vue      |  2 +-
 src/plugins/timeConductor/TimePopupFixed.vue  | 10 +++---
 .../timeConductor/TimePopupRealtime.vue       |  2 +-
 src/plugins/timeConductor/conductor.scss      | 35 +++++++++++++++----
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index 2834fc2e55..fe2e598e86 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -22,7 +22,7 @@
 
 <template>
   <form ref="fixedDeltaInput">
-    <div class="c-tc-input-popup__input-grid">
+    <div class="c-tc-input-popup__input-grid-utc">
       <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
       <div class="pr-time-label pr-time-label-start-time">Time</div>
       <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index af2e693f69..876367a840 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -23,12 +23,10 @@
 <template>
   <form ref="fixedDeltaInput">
     <div class="c-tc-input-popup__input-grid">
-      <div class="pr-time-label pr-time-label-start-date">Start</div>
-      <div class="pr-time-label pr-time-label-start-time"></div>
-      <div class="pr-time-label pr-time-label-end-date">End</div>
-      <div class="pr-time-label pr-time-label-end-time"></div>
+      <div class="pr-time-label pr-time-label-start-time">Start</div>
+      <div class="pr-time-label pr-time-label-end-time">End</div>
 
-      <div class="pr-time-input pr-time-input--time pr-time-input-start-date">
+      <div class="pr-time-input pr-time-input-start">
         <input
           ref="startTime"
           v-model="formattedBounds.start"
@@ -43,7 +41,7 @@
 
       <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
 
-      <div class="pr-time-input pr-time-input--time pr-time-input-end-date">
+      <div class="pr-time-input pr-time-input-end">
         <input
           ref="endTime"
           v-model="formattedBounds.end"
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 46f50a8061..28c316e265 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -22,7 +22,7 @@
 
 <template>
   <form ref="deltaInput">
-    <div class="c-tc-input-popup__input-grid">
+    <div class="c-tc-input-popup__input-grid-utc">
       <div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div>
       <div class="pr-time-label pr-time-label-minus-mins">Mins</div>
       <div class="pr-time-label pr-time-label-minus-secs">Secs</div>
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index f914cfdf7a..f05ee3dada 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -629,7 +629,6 @@
         }
         &-label-end-time{
             grid-area: eTime;
-
         }
         &-input-end-date{
             grid-area: eDateInput;
@@ -641,6 +640,14 @@
             grid-area: blank;
         }
 
+        // FIXED TIME MODE non utc
+        &-input-start{
+            grid-area: sInput;
+        }
+        &-input-end{
+            grid-area: eInput;
+        }
+
         //REAL TIME MODE
         &-label-minus-hrs{
             grid-area: labelMinusHrs;
@@ -691,14 +698,20 @@
     }
 
     &--fixed-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas: 
                "sDate sTime . eDate eTime ."
                "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
         }
+        .c-tc-input-popup__input-grid {
+            grid-template-columns: 1fr 1fr 1fr 2fr;
+            grid-template-areas: 
+               "sTime . eTime ."
+               "sInput arrowIcon eInput buttons";
+        }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(2, max-content) 1fr;
                 grid-template-areas:
                     "sDate sTime ."
@@ -708,19 +721,29 @@
                 padding: 2px; 
                 overflow: hidden;
             }
+            .c-tc-input-popup__input-grid {
+              grid-template-columns: repeat(2, max-content) 1fr;
+              grid-template-areas:
+                  "sTime ."
+                  "sInput ."
+                  "eTime ."
+                  "eInput buttons";
+              padding: 2px; 
+              overflow: hidden;
+          }
         }
 
     }
 
     &--realtime-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas:
                 "labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
                 "inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
         }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(3, max-content) 1fr;
                 grid-template-areas:
                     "labelMinusHrs labelMinusMins labelMinusSecs ."
@@ -733,7 +756,7 @@
         }
     }
 
-    &__input-grid {
+    &__input-grid, &__input-grid-utc {
         display: grid;
         grid-row-gap: $interiorMargin;
         grid-column-gap: $interiorMarginSm;