From a7f0bb4c4aebf2687740eea10034353270b91603 Mon Sep 17 00:00:00 2001
From: Aditya Patel <heyadityapatel@gmail.com>
Date: Wed, 22 Jan 2025 16:08:20 +0530
Subject: [PATCH] add styling

---
 src/components/JobConfiguration.vue |  2 +-
 src/views/Pipeline.vue              | 30 ++++++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 177e57f1..5270ddfe 100644
--- a/src/components/JobConfiguration.vue
+++ b/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>
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index d05a56d9..44f1a4ef 100644
--- a/src/views/Pipeline.vue
+++ b/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>