From e82ef2a2b7b1cd8b954d234487f98f59e9f65320 Mon Sep 17 00:00:00 2001
From: ktx-mihir <mihir.patel@kiara.tech>
Date: Fri, 29 May 2026 22:37:23 +0530
Subject: [PATCH] fix: pipeline view and table chart overlap (#12362)

- Main menu width and spacing

- Stream loader center

- Stream details hover color fix

- Pipeline view

- Sticky column table overlap
---
 web/src/components/MenuLink.vue               |  4 +--
 web/src/components/TenstackTable.vue          |  2 +-
 web/src/components/logstream/schema.vue       |  4 +--
 web/src/components/pipeline/PipelineView.vue  | 30 +++++++++----------
 web/src/components/pipeline/PipelinesList.vue |  2 +-
 web/src/composables/useStickyColumns.ts       |  4 +--
 web/src/lib/core/Navbar/ONavbar.vue           |  2 +-
 web/src/styles/_variables.scss                |  2 ++
 web/src/styles/schema.scss                    |  7 +----
 9 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/web/src/components/MenuLink.vue b/web/src/components/MenuLink.vue
index 3bcd651b45..371eab110b 100644
--- a/web/src/components/MenuLink.vue
+++ b/web/src/components/MenuLink.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :target="target"
     :class="[
       'nav-menu-item',
-      'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:p-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:first:mt-1 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
+      'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:py-2 tw:px-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
       'tw:text-tabs-inactive-text tw:hover:bg-tabs-hover-bg tw:hover:text-tabs-active-text',
       { 'menu-link-function': title === 'Functions' }
     ]"
@@ -91,7 +91,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }"
     :class="[
       'nav-menu-item',
-      'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:p-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:first:mt-1 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
+      'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:py-2 tw:px-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
       isActive
         ? 'tw:bg-tabs-active-bg tw:text-tabs-active-text tw:border-l-tabs-indicator!'
         : 'tw:text-tabs-inactive-text tw:hover:bg-tabs-hover-bg tw:hover:text-tabs-active-text',
diff --git a/web/src/components/TenstackTable.vue b/web/src/components/TenstackTable.vue
index bc948b3b5a..b8d1de739d 100644
--- a/web/src/components/TenstackTable.vue
+++ b/web/src/components/TenstackTable.vue
@@ -1502,7 +1502,7 @@ const getStickyTotalHeaderForPivot = (cell: any) => {
     "min-width": `${width}px`,
     "max-width": `${width}px`,
     // Opaque background so scrolled body content doesn't bleed through
-    "background-color": "inherit",
+    "background-color": "var(--o2-sticky-col-header-bg)",
     "box-shadow": "-4px 0 8px rgba(0, 0, 0, 0.15)",
     "white-space": "normal",
     "word-break": "break-word",
diff --git a/web/src/components/logstream/schema.vue b/web/src/components/logstream/schema.vue
index e921dec6f4..26e122b537 100644
--- a/web/src/components/logstream/schema.vue
+++ b/web/src/components/logstream/schema.vue
@@ -97,8 +97,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- we will show loading state here -->
           <div
             v-if="loadingState"
-            class="tw:pt-3 tw:text-center q-w-md tw:mx-4 tw:flex tw:justify-center"
-            style="max-width: 450px"
+            class="tw:flex tw:items-center tw:justify-center tw:w-full tw:h-full"
+            style="min-height: calc(100vh - 3.75rem)"
           >
             <OSpinner size="md" />
           </div>
diff --git a/web/src/components/pipeline/PipelineView.vue b/web/src/components/pipeline/PipelineView.vue
index af2bc9e321..61cc5e2647 100644
--- a/web/src/components/pipeline/PipelineView.vue
+++ b/web/src/components/pipeline/PipelineView.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="pipeline-view-tooltip container">
-      <VueFlow 
-      ref="vueFlowRef"
+      <VueFlow
+        ref="vueFlowRef"
         v-model:nodes="lockedNodes"
         v-model:edges="edges"
         :options="{ readOnly: true }"
-        :default-viewport="{ zoom: 0 }"
-
+        :min-zoom="0.1"
+        @nodes-initialized="onNodesReady"
        >
        <DropzoneBackground
         :style="{
@@ -50,7 +50,7 @@ import DropzoneBackground from "@/plugins/pipelines/DropzoneBackground.vue";
   import { defineComponent, computed, watch } from 'vue';
   import { ControlButton, Controls } from '@vue-flow/controls'
   import { VueFlow } from "@vue-flow/core";
-  import { ref, onMounted } from "vue";
+  import { ref, onMounted, nextTick } from "vue";
   import { useStore } from "vuex";
   import config from "@/aws-exports";
 import CustomNode from '@/plugins/pipelines/CustomNode.vue';
@@ -92,11 +92,15 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
       });
   
 
-      onMounted(async () => {
-      if (vueFlowRef.value) {
-        vueFlowRef.value.fitView({ padding: 0.1});
-      }
+      const onNodesReady = () => {
+        nextTick(() => {
+          if (vueFlowRef.value) {
+            vueFlowRef.value.fitView({ padding: 0.1 });
+          }
+        });
+      };
 
+      onMounted(async () => {
         pipelineObj.nodeTypes = [
   {
     label: "Source",
@@ -179,11 +183,6 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
           }
         }
 
-        setTimeout(() => {
-          if(vueFlowRef.value)
-          vueFlowRef.value.fitView({ padding: 0.1});
-        }, 100);
-
       })
 
       // Watch for pipeline prop changes to update error information
@@ -200,12 +199,13 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
         vueFlowRef,
         pipelineObj,
         streamImage,
+        onNodesReady,
       };
 
     }
   });
   </script>
-  
+    
   <style lang="scss">
   /* Simple tooltip styling - let CustomNode handle everything else */
   .pipeline-view-tooltip {
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index dacabde26b..ad046010ae 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -186,7 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('pipeline.view')"
                   icon-left="visibility"
                 >
-                  <OTooltip>
+                  <OTooltip max-width="none">
                     <template #content
                       ><PipelineView :pipeline="row"
                     /></template>
diff --git a/web/src/composables/useStickyColumns.ts b/web/src/composables/useStickyColumns.ts
index c34b715767..680c916a05 100644
--- a/web/src/composables/useStickyColumns.ts
+++ b/web/src/composables/useStickyColumns.ts
@@ -96,7 +96,7 @@ export function useStickyColumns(props: any, store: any) {
             position: sticky !important;
             left: ${offset}px !important;
             z-index: 4 !important;
-            background-color: var(--o2-table-header-bg) !important;
+            background-color: var(--o2-sticky-col-header-bg) !important;
             box-shadow: ${shadow} !important;
           }
           ${scope} tbody td:nth-child(${colIndex + 1}).sticky-column {
@@ -116,7 +116,7 @@ export function useStickyColumns(props: any, store: any) {
             right: ${rightOffset}px !important;
             z-index: 4 !important;
             min-width: ${TOTAL_COL_WIDTH}px !important;
-            background-color: var(--o2-table-header-bg) !important;
+            background-color: var(--o2-sticky-col-header-bg) !important;
             box-shadow: ${shadow} !important;
           }
         `;
diff --git a/web/src/lib/core/Navbar/ONavbar.vue b/web/src/lib/core/Navbar/ONavbar.vue
index 7f5ada0e7b..09fbe5cda1 100644
--- a/web/src/lib/core/Navbar/ONavbar.vue
+++ b/web/src/lib/core/Navbar/ONavbar.vue
@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     aria-label="Main navigation"
     data-test="navbar-main-nav"
     data-o2-navbar
-    class="left-drawer navbar-links tw:flex tw:flex-col tw:pt-1 tw:bg-surface-panel tw:rounded-md tw:border tw:border-border-default tw:mt-1 tw:mb-[0.675rem] tw:shrink-0 tw:min-h-0 tw:overflow-y-auto tw:w-[5.25rem]"
+    class="left-drawer navbar-links tw:flex tw:flex-col tw:py-2 tw:bg-surface-panel tw:rounded-md tw:border tw:border-border-default tw:mt-1 tw:mb-[0.675rem] tw:shrink-0 tw:min-h-0 tw:overflow-y-auto tw:w-[5.625rem]"
     @keydown="handleKeydown"
   >
     <menu-link
diff --git a/web/src/styles/_variables.scss b/web/src/styles/_variables.scss
index 301f603034..3a915bb901 100644
--- a/web/src/styles/_variables.scss
+++ b/web/src/styles/_variables.scss
@@ -369,6 +369,7 @@ $json-object-dark: #D1D5DB;         // Light gray
 
 
   --o2-table-header-bg: color-mix(in srgb, #{$theme-color} 20%, white);
+  --o2-sticky-col-header-bg: #E0E0E0;
 
   --o2-table-actions-bg: white;
 
@@ -608,6 +609,7 @@ $json-object-dark: #D1D5DB;         // Light gray
   --o2-menu-color: #FFFFFF;
 
   --o2-table-header-bg: color-mix(in srgb, var(--o2-theme-color) 80%, white);
+  --o2-sticky-col-header-bg: #565656;
 
   --o2-table-actions-bg: #1f2223;
 
diff --git a/web/src/styles/schema.scss b/web/src/styles/schema.scss
index c0487cc6a4..201d7e3b97 100644
--- a/web/src/styles/schema.scss
+++ b/web/src/styles/schema.scss
@@ -38,12 +38,7 @@
     max-width: 15rem;
   }
 }
-.dark-theme-table tr:hover td:nth-child(2) {
-  background-color: #272a2b !important;
-}
-.light-theme-table tr:hover td:nth-child(2) {
-  background-color: #f7f7f7 !important;
-}
+
 
 .schema-fields-tabs {
   height: fit-content;