From 2bc285d60dd7f6d2473ae3cfe3ea25c792759baf Mon Sep 17 00:00:00 2001
From: Neha Gokhale <neha.gokhale@ibm.com>
Date: Tue, 16 Apr 2024 13:32:14 -0700
Subject: [PATCH] #1867 Fixed left nav subtabs CSS in tearsheet (#1875)

---
 .../src/common-properties/panels/subtabs/subtabs.scss     | 8 ++++----
 canvas_modules/harness/assets/styles/harness.scss         | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.scss b/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.scss
index 5e94574311..20408a6390 100644
--- a/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.scss
+++ b/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.scss
@@ -32,34 +32,34 @@ $selected-tab-width: 3px;
 
 .properties-leftnav-container {
 	display: flex;
-	border-top: px solid $layer-accent-01;
 	height: calc(100% + #{$parent-padding}); // Include padding from parent
 	margin-top: -$spacing-05;
 	margin-left: -$spacing-05;
 	margin-bottom: calc(-1 * #{$parent-padding});
 
-	// TODO: Height of this class will be fixed in issue https://github.ibm.com/NGP-TWC/wdp-abstract-canvas/issues/3699
 	.properties-leftnav-subtabs {
 		width: 282px;
 		background-color: $layer-01;
 		border-right: 1px solid $layer-accent-01;
 		padding-top: $spacing-02;
 		height: 100%;
+		max-block-size: none; // To make the height same as parent div
 
 		.cds--tab--list {
 			flex-direction: column;
 			width: 282px;
-			height: fit-content;
 		}
 
 		button.properties-leftnav-subtab-item {
 			&:hover {
-				border-bottom: 0;
+				background-color: $layer-hover-01;
+				border-block-end: none !important; // Added !important to override carbon CSS which showed bottom border
 			}
 
 			border-left: $selected-tab-width solid transparent;
 			border-bottom: 0;
 			transition: none; // Prevent border/outline from flickering
+			max-block-size: $spacing-08;
 
 			&:focus, &:active {
 				outline: 0;
diff --git a/canvas_modules/harness/assets/styles/harness.scss b/canvas_modules/harness/assets/styles/harness.scss
index 1aab5d357d..af95029414 100644
--- a/canvas_modules/harness/assets/styles/harness.scss
+++ b/canvas_modules/harness/assets/styles/harness.scss
@@ -15,7 +15,7 @@
  */
 
 @use "@carbon/react/scss/themes" as *;
-@use "./carbon.scss" as *;
+@import "./carbon.scss";
 
 // Switch the theme's below to change light <-> dark theme for harness
 // Modify common-canvas/src/themes/light.scss to switch common-canvas.
@@ -32,7 +32,6 @@ $harness-sidepanel-width: 320px;
 $harness-sidepanel-transition-time: 0.3s;
 $harness-console-height: 200px;
 
-@import "./carbon.scss";
 @import "../../src/client/components/console/console.scss";
 @import "../../src/styles/custom-canvases.scss";
 @import "../../src/styles/canvas-customization.scss";