Add scroll to each column in pipeline

src/components/JobConfiguration.vue

@@ -130,7 +130,7 @@
   <!-- Import logs -->
   <section v-if="historyJobConfig && currentJob.runtimeData?.configId && getDataManagerLogs?.length">
     <ion-item lines="none">
-      <h1>{{ translate('Import logs') }}</h1>
+      <h3>{{ translate('Import logs') }}</h3>
       <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
     </ion-item>
     <ion-progress-bar :value="(getProcessedFileCount() - getErrorFileCount()) / getDataManagerLogs.length"></ion-progress-bar>

src/views/DataManagerLogDetails.vue

@@ -8,8 +8,8 @@
     </ion-header>
 
     <ion-content>
-      <div class="header ion-padding">
-        <section>
+      <div class="header">
+        <section class="ion-margin">
           <ion-item lines="none">
             <h1>{{ translate('Import logs') }}</h1>
           </ion-item>
@@ -37,10 +37,10 @@
           </ion-list>
         </section>
         <div class="config-details">
-          <ion-label lines="none">
+          <ion-item lines="none">
             <p class="overline">{{ currentJob?.runtimeData?.configId }}</p>
             <h1>{{ configDetails?.description }}</h1>
-          </ion-label>
+          </ion-item>
           <ion-list>
             <ion-item>
               <ion-icon slot="start" :icon="shareSocialOutline" />
@@ -71,9 +71,9 @@
       <div class="empty-state" v-if="isLoading">
         <ion-spinner name="crescent" />
       </div>
-      <div v-else-if="dataManagerLogList?.length" >
+      <template v-else-if="dataManagerLogList?.length" >
         <div class="list-item" v-for="(log, index) in dataManagerLogList" :key="index">
-          <ion-item lines="none">
+          <ion-item class="file-name" lines="none">
             <ion-icon slot="start" :icon="documentTextOutline" />
             <ion-label>
               <p class="overline">{{ log.logId }}</p>
@@ -82,33 +82,33 @@
             </ion-label>
           </ion-item>
 
-          <ion-label>
+          <ion-label class="file-start-time">
             {{ log.startDateTime ? getDateTime(log.startDateTime) : '-' }}
             <p>{{ translate('Started') }}</p>
           </ion-label>
 
-          <ion-label>
+          <ion-label class="file-end-time">
             {{ log.finishDateTime ? getDateTime(log.finishDateTime) : '-' }}
             <p>{{ translate('Finished') }}</p>
           </ion-label>
 
-          <ion-badge v-if="log.statusId" :color="getLogStatusColor(log.statusId)">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
+          <ion-badge class="file-status tablet" v-if="log.statusId" :color="getLogStatusColor(log.statusId)">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
 
-          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId">
+          <div class="file-status tablet ion-text-center" v-if="log.errorRecordContentId">
             <ion-button fill="clear" color="medium" @click="downloadErrorRecordFile(log)">
               <ion-icon slot="icon-only" :icon="cloudDownloadOutline" />
             </ion-button>
             <ion-label>
               <p>{{ translate('Failed records') }}</p>
             </ion-label>
           </div>
-          <div v-else></div>
+          <div class="tablet" v-else></div>
 
           <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover(log, $event)">
             <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
           </ion-button>
         </div>
-      </div>
+      </template>
       <div v-else class="empty-state">
         {{ translate('No logs found') }}
       </div>
@@ -302,7 +302,8 @@ export default defineComponent ({
 }
 
 .list-item {
-  --columns-desktop: 6;
+  --columns-desktop: 7;
+  --columns-tablet: 5;
   border-bottom : 1px solid var(--ion-color-medium);
 }
 
@@ -320,9 +321,19 @@ export default defineComponent ({
   align-self: end;
 }
 
+@media (min-width: 700px) {
+  .file-name {
+    grid-column: span 2;
+  }
+}
+
 @media (max-width: 991px) {
   .header {
-    grid-template-columns: 1fr;
+    display: block;
+  }
+
+  .config-details {
+    margin-top: var(--spacer-base);
   }
 }
 </style> 

src/views/Pipeline.vue

@@ -38,7 +38,7 @@
         </ion-item>
       </div>
       <main v-else>
-        <section v-if="segmentSelected === 'pending'">
+        <section id="pending" v-if="segmentSelected === 'pending'">
           <!-- Empty state -->
           <div v-if="pendingJobs?.length === 0">
             <p class="ion-text-center">{{ translate("There are no jobs pending right now")}}</p>
@@ -113,7 +113,7 @@
           </div>
         </section>
 
-        <section v-if="segmentSelected === 'running'">
+        <section id="running" v-if="segmentSelected === 'running'">
           <!-- Empty state -->
           <div v-if="runningJobs?.length === 0">
             <p class="ion-text-center">{{ translate("There are no jobs running right now")}}</p>
@@ -179,7 +179,7 @@
           </div> 
         </section>
 
-        <section v-if="segmentSelected === 'history'">
+        <section id="history" v-if="segmentSelected === 'history'">
           <!-- Empty state -->
           <div v-if="jobHistory?.length === 0">
             <p class="ion-text-center">{{ translate("No jobs have run yet")}}</p>
@@ -256,11 +256,11 @@
 
           <ion-refresher slot="fixed" @ionRefresh="refreshJobs($event)">
             <ion-refresher-content pullingIcon="crescent" refreshingSpinner="crescent" />
-          </ion-refresher>   
+          </ion-refresher>
           <ion-infinite-scroll @ionInfinite="loadMoreJobHistory($event)" threshold="100px"  v-show="isHistoryJobsScrollable" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
-          </div>          
+          </div>
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="(segmentSelected === 'pending' || segmentSelected === 'history') && currentJob && Object.keys(currentJob).length">
@@ -821,5 +821,25 @@ ion-chip {
   ion-toolbar > div > ion-chip:first-child {
     margin-left: var(--spacer-3xl);
   }
+
+  /* overriding global main element CSS */
+  main {
+    margin-block-start: none;
+    /* limit height to visibile canvas */
+    height: 100%;
+    overflow-y: hidden;
+  }
+
+  /* allow both columns to scroll independently */
+  section, aside {
+    height: 100%;
+    overflow: scroll;
+    padding-block-start: var(--spacer-base);
+  }
+
+  aside {
+    padding-block-end: var(--spacer-base);
+  }
+
 }
 </style>