From 14822e00c6f92fa4d863bcf9afb8210ae8e70842 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 15 Oct 2026 15:20:29 +0530
Subject: [PATCH 1/5] fix(ui): restore sidebar label size and row spacing on
 core NavItem

Render left sidebar items at core's sm size (14px labels) so labels no
longer read oversized or wrap, space rows to a 40px pitch, give the
Settings/Logout footer the same row spacing, and make NavItemBase's
collapsible-child indent size-aware so sm children line up with the
parent label.
---
 .../base-components/nav-item.test.tsx         | 33 +++++++++++++++++++
 .../base-components/nav-item.tsx              |  6 +++-
 .../LeftSidebar/LeftSidebar.component.tsx     | 10 ++++--
 3 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx

diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
new file mode 100644
index 000000000000..beb439144d9c
--- /dev/null
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
@@ -0,0 +1,33 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { NavItemBase, type NavItemSize } from './nav-item';
+
+describe('NavItemBase', () => {
+  it.each<[NavItemSize, string]>([
+    ['sm', 'tw:pl-9'],
+    ['md', 'tw:pl-10'],
+  ])(
+    'indents a %s collapsible child to line up with its parent label',
+    (size, indent) => {
+      render(
+        <NavItemBase href="/child" size={size} type="collapsible-child">
+          Child
+        </NavItemBase>
+      );
+
+      expect(screen.getByRole('link', { name: 'Child' })).toHaveClass(indent);
+    }
+  );
+});
diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
index 21805ae12670..a8f622e8d53e 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -19,12 +19,15 @@ export type NavItemSize = 'sm' | 'md';
 const sizeStyles = sortCx({
   sm: {
     padding: 'tw:py-1',
+    // Lines child labels up with the parent label: px-3 + icon + mr-2.
+    childIndent: 'tw:pl-9',
     icon: 'tw:size-4',
     label: 'tw:text-sm tw:font-normal',
     labelCurrent: 'tw:font-semibold',
   },
   md: {
     padding: 'tw:py-2',
+    childIndent: 'tw:pl-10',
     icon: 'tw:size-5',
     label: 'tw:text-md tw:font-semibold',
     labelCurrent: '',
@@ -137,7 +140,8 @@ export const NavItemBase = ({
       <AriaLink
         aria-current={current ? 'page' : undefined}
         className={cx(
-          'tw:pr-3 tw:pl-10',
+          'tw:pr-3',
+          sizeStyles[size].childIndent,
           sizeStyles[size].padding,
           styles.root,
           current && styles.rootSelected
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
index 84238bfe6f03..7d72ccd090e8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
@@ -153,6 +153,7 @@ const LeftSidebar = () => {
         dataTestId={item.dataTestId}
         href={item.redirect_url}
         icon={item.icon}
+        size="sm"
         truncate={false}
         type={parentKey ? 'collapsible-child' : 'link'}
         onClick={() => navigateToItem(item, parentKey)}>
@@ -240,6 +241,7 @@ const LeftSidebar = () => {
             selectedKeys.includes(child.key)
           )}
           icon={item.icon}
+          size="sm"
           truncate={false}
           type="collapsible">
           <span data-testid={item.dataTestId}>{t(item.title)}</span>
@@ -247,7 +249,7 @@ const LeftSidebar = () => {
         <ul className="tw:m-0 tw:list-none tw:p-0">
           {item.children?.map((child) => (
             <li
-              className="tw:py-0.5"
+              className="tw:py-1"
               data-testid={`side-bar-${child.dataTestId}`}
               key={child.key}>
               {renderLeaf(child, item.key)}
@@ -286,7 +288,7 @@ const LeftSidebar = () => {
             <ul className="left-sidebar-menu tw:m-0 tw:list-none tw:px-3 tw:py-0">
               {sideBarItems.map((item) => (
                 <li
-                  className="tw:py-0.5"
+                  className="tw:py-1.5"
                   data-testid={`side-bar-${item.dataTestId}`}
                   key={item.key}>
                   {item.children?.length ? renderGroup(item) : renderLeaf(item)}
@@ -300,7 +302,9 @@ const LeftSidebar = () => {
             <Divider className="tw:my-2" />
             <ul className="tw:m-0 tw:list-none tw:p-0">
               {[SETTING_ITEM, LOGOUT_ITEM].map((item) => (
-                <li key={item.key}>{renderLeaf(item)}</li>
+                <li className="tw:py-1" key={item.key}>
+                  {renderLeaf(item)}
+                </li>
               ))}
             </ul>
           </nav>

From b2657eebe0dbf2925aef56dd2165a3073941e989 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Oct 2026 09:51:35 +0000
Subject: [PATCH 2/5] chore(playwright): auto-refresh impact-map.generated.json

---
 .github/playwright/impact-map.generated.json | 21 ++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/.github/playwright/impact-map.generated.json b/.github/playwright/impact-map.generated.json
index d2a6dab48ee5..65a86538ff99 100644
--- a/.github/playwright/impact-map.generated.json
+++ b/.github/playwright/impact-map.generated.json
@@ -143,6 +143,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityDashboard.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityPermissions.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerDateFilter.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerSqlQuery.spec.ts",
         "playwright/e2e/Features/DataQuality/Profiler.spec.ts",
@@ -749,6 +750,7 @@
         "playwright/e2e/Features/AppMode/AppModeUrlHandling.spec.ts",
         "playwright/e2e/Features/ApplicationsSettingsModal.spec.ts",
         "playwright/e2e/Features/CustomMetric.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerDateFilter.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerSqlQuery.spec.ts",
         "playwright/e2e/Features/DataQuality/RunTestCase.spec.ts",
@@ -802,6 +804,7 @@
         "playwright/e2e/Features/DataQuality/AddTestCaseNewFlow.spec.ts",
         "playwright/e2e/Features/DataQuality/BundleSuiteBulkOperations.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQuality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerDateFilter.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerSqlQuery.spec.ts",
         "playwright/e2e/Features/DataQuality/Profiler.spec.ts",
@@ -1685,6 +1688,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityListAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityPermissions.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterOwnerChange.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterSoftDelete.spec.ts",
@@ -3347,6 +3351,7 @@
         "openmetadata-ui/src/main/resources/ui/playwright/utils/codeEditor.ts"
       ],
       "specs": [
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/Profiler.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
         "playwright/e2e/Features/Permission.spec.ts",
@@ -3448,6 +3453,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityListAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityPermissions.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterOwnerChange.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterSoftDelete.spec.ts",
@@ -3880,6 +3886,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityDashboard.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityDashboardAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
         "playwright/e2e/Features/IncidentManager.spec.ts",
         "playwright/e2e/Features/TestSuiteMultiPipeline.spec.ts",
@@ -5120,6 +5127,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityDashboard.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityPermissions.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/Profiler.spec.ts",
         "playwright/e2e/Features/DataQuality/RunTestCase.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
@@ -6384,6 +6392,7 @@
         "playwright/e2e/Features/DataQuality/ColumnLevelTests.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQuality.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
         "playwright/e2e/Pages/DataContracts.spec.ts",
         "playwright/e2e/VersionPages/TestCaseVersionPage.spec.ts"
@@ -6524,6 +6533,7 @@
         "openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/RunDetailsCard/RunDetailsCard.tsx"
       ],
       "specs": [
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/TestCaseDetailsPage.spec.ts"
       ]
     },
@@ -6798,6 +6808,7 @@
         "openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaEditor/CodeEditor.tsx"
       ],
       "specs": [
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
         "playwright/e2e/Features/QueryEntity.spec.ts",
         "playwright/e2e/Pages/DataContracts.spec.ts"
@@ -6808,6 +6819,7 @@
         "openmetadata-ui/src/main/resources/ui/src/components/Database/SchemaEditor/SchemaEditor.tsx"
       ],
       "specs": [
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts",
         "playwright/e2e/Features/QueryEntity.spec.ts",
         "playwright/e2e/Pages/DataContracts.spec.ts"
@@ -11320,6 +11332,14 @@
         "playwright/e2e/Features/DataQuality/DataQualityDashboard.spec.ts"
       ]
     },
+    {
+      "sources": [
+        "openmetadata-ui/src/main/resources/ui/src/components/observability/data-quality/ThresholdPreview/ThresholdPreview.tsx"
+      ],
+      "specs": [
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts"
+      ]
+    },
     {
       "sources": [
         "openmetadata-ui/src/main/resources/ui/src/components/platform/ai-shell/AINotFoundPage/AINotFoundPage.tsx"
@@ -11876,6 +11896,7 @@
         "playwright/e2e/Features/DataQuality/DataQualityListAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/DataQualityPermissions.spec.ts",
         "playwright/e2e/Features/DataQuality/Dimensionality.spec.ts",
+        "playwright/e2e/Features/DataQuality/FailureThreshold.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterOwnerChange.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterReindex.spec.ts",
         "playwright/e2e/Features/DataQuality/IncidentManagerAfterSoftDelete.spec.ts",

From 67badb2e51ae426ae0e496954537404875138a2f Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 15 Oct 2026 16:06:14 +0530
Subject: [PATCH 3/5] fix(ui): match the classic sidebar to the pre-migration
 look

Add an lg size and a solid variant to core NavItemBase (28px icons, 56px
rows, brand-filled current item and open-group header, child icons at lg)
and use them in the classic LeftSidebar with the old 16px inset, 8px row
gap and bordered open-group panel. Logout renders as a nav item so it
matches Settings.
---
 .../base-components/nav-item.test.tsx         |  39 ++++++
 .../base-components/nav-item.tsx              | 114 ++++++++++++------
 .../LeftSidebar/LeftSidebar.component.tsx     |  50 ++++----
 .../MyData/LeftSidebar/LeftSidebar.test.tsx   |  27 +++++
 4 files changed, 169 insertions(+), 61 deletions(-)

diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
index beb439144d9c..cfab3741ad7c 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
@@ -14,6 +14,8 @@ import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import { NavItemBase, type NavItemSize } from './nav-item';
 
+const Icon = () => <svg data-testid="nav-icon" />;
+
 describe('NavItemBase', () => {
   it.each<[NavItemSize, string]>([
     ['sm', 'tw:pl-9'],
@@ -30,4 +32,41 @@ describe('NavItemBase', () => {
       expect(screen.getByRole('link', { name: 'Child' })).toHaveClass(indent);
     }
   );
+
+  it.each<[NavItemSize, number]>([
+    ['md', 0],
+    ['lg', 1],
+  ])('shows a %s collapsible child icon %i time(s)', (size, count) => {
+    render(
+      <NavItemBase
+        href="/child"
+        icon={Icon}
+        size={size}
+        type="collapsible-child">
+        Child
+      </NavItemBase>
+    );
+
+    expect(screen.queryAllByTestId('nav-icon')).toHaveLength(count);
+  });
+
+  it('fills the current item with the brand colour in the solid variant', () => {
+    render(
+      <>
+        <NavItemBase current href="/a" type="link" variant="solid">
+          Current
+        </NavItemBase>
+        <NavItemBase current href="/b" type="link">
+          Default
+        </NavItemBase>
+      </>
+    );
+
+    expect(screen.getByRole('link', { name: 'Current' })).toHaveClass(
+      'tw:bg-brand-solid'
+    );
+    expect(screen.getByRole('link', { name: 'Default' })).toHaveClass(
+      'tw:bg-brand-primary_alt'
+    );
+  });
 });
diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
index a8f622e8d53e..aefccfaa2893 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -14,29 +14,62 @@ const styles = sortCx({
   rootSelected: 'tw:bg-brand-primary_alt tw:hover:bg-brand-primary_alt',
 });
 
-export type NavItemSize = 'sm' | 'md';
+export type NavItemVariant = 'default' | 'solid';
+
+// `solid` fills the current item with the brand colour and opens a collapsible
+// group under a filled header; hover tints rest items brand instead of gray.
+const solidStyles = sortCx({
+  root: 'tw:hover:bg-brand-primary_alt tw:dark:hover:bg-brand-primary_alt',
+  rootSelected:
+    'tw:bg-brand-solid tw:hover:bg-brand-solid tw:dark:bg-brand-solid tw:dark:hover:bg-brand-solid',
+  groupSelected:
+    'tw:bg-brand-solid_hover tw:hover:bg-brand-solid_hover tw:dark:bg-brand-solid_hover tw:dark:hover:bg-brand-solid_hover',
+  groupOpen:
+    'tw:in-open:rounded-b-none tw:in-open:bg-brand-solid_hover tw:in-open:hover:bg-brand-solid_hover tw:dark:in-open:bg-brand-solid_hover',
+  label: 'tw:group-hover:text-brand-secondary',
+  labelSelected:
+    'tw:text-primary_on-brand tw:group-hover:text-primary_on-brand',
+  labelOpen:
+    'tw:in-open:text-primary_on-brand tw:in-open:group-hover:text-primary_on-brand',
+  icon: 'tw:group-hover:text-fg-brand-secondary_alt',
+  iconSelected: 'tw:text-fg-white tw:group-hover:text-fg-white',
+  iconOpen: 'tw:in-open:text-fg-white tw:in-open:group-hover:text-fg-white',
+});
+
+export type NavItemSize = 'sm' | 'md' | 'lg';
 
 const sizeStyles = sortCx({
   sm: {
-    padding: 'tw:py-1',
+    root: 'tw:px-3 tw:py-1',
     // Lines child labels up with the parent label: px-3 + icon + mr-2.
-    childIndent: 'tw:pl-9',
-    icon: 'tw:size-4',
+    child: 'tw:py-1 tw:pr-3 tw:pl-9',
+    icon: 'tw:mr-2 tw:size-4',
     label: 'tw:text-sm tw:font-normal',
     labelCurrent: 'tw:font-semibold',
   },
   md: {
-    padding: 'tw:py-2',
-    childIndent: 'tw:pl-10',
-    icon: 'tw:size-5',
+    root: 'tw:px-3 tw:py-2',
+    child: 'tw:py-2 tw:pr-3 tw:pl-10',
+    icon: 'tw:mr-2 tw:size-5',
     label: 'tw:text-md tw:font-semibold',
     labelCurrent: '',
   },
+  // Roomy primary navigation: 56px rows with 28px icons. Children keep their
+  // icon and sit flush inside the open group.
+  lg: {
+    root: 'tw:rounded-xl tw:p-3.5',
+    child: 'tw:rounded-none tw:px-4 tw:py-2.5',
+    icon: 'tw:mr-2.5 tw:size-7',
+    label: 'tw:text-sm tw:font-medium',
+    labelCurrent: 'tw:font-semibold',
+  },
 });
 
 interface NavItemBaseProps {
-  /** Text and icon size. `sm` is for dense secondary lists. Defaults to `md`. */
+  /** Text and icon size. `sm` is for dense secondary lists, `lg` for roomy primary navigation. Defaults to `md`. */
   size?: NavItemSize;
+  /** `solid` fills the current item and an open group's header with the brand colour. Defaults to `default`. */
+  variant?: NavItemVariant;
   /** Whether the nav item shows only an icon. */
   iconOnly?: boolean;
   /** Whether the collapsible nav item is open. */
@@ -70,20 +103,42 @@ export const NavItemBase = ({
   children,
   truncate = true,
   size = 'md',
+  variant = 'default',
   dataTestId,
   onClick,
 }: NavItemBaseProps) => {
-  const iconElement = Icon && (
+  const isSolid = variant === 'solid';
+  const isGroup = type === 'collapsible';
+  // Children only show their icon at `lg`; smaller sizes indent instead.
+  const showIcon = type !== 'collapsible-child' || size === 'lg';
+
+  const iconElement = Icon && showIcon && (
     <Icon
       aria-hidden="true"
       className={cx(
-        'tw:mr-2 tw:shrink-0 tw:text-fg-quaternary tw:transition-inherit-all',
+        'tw:shrink-0 tw:text-fg-quaternary tw:transition-inherit-all',
         sizeStyles[size].icon,
-        current && 'tw:text-fg-brand-secondary_alt'
+        current && 'tw:text-fg-brand-secondary_alt',
+        isSolid && solidStyles.icon,
+        isSolid && current && solidStyles.iconSelected,
+        isSolid && isGroup && solidStyles.iconOpen
       )}
     />
   );
 
+  const rootClassName = cx(
+    styles.root,
+    type === 'collapsible-child'
+      ? sizeStyles[size].child
+      : sizeStyles[size].root,
+    current && styles.rootSelected,
+    isSolid && solidStyles.root,
+    isSolid &&
+      current &&
+      (isGroup ? solidStyles.groupSelected : solidStyles.rootSelected),
+    isSolid && isGroup && solidStyles.groupOpen
+  );
+
   const badgeElement =
     badge && (typeof badge === 'string' || typeof badge === 'number') ? (
       <Badge className="tw:ml-3" color="gray" size="sm" type="pill-color">
@@ -100,7 +155,11 @@ export const NavItemBase = ({
         sizeStyles[size].label,
         current && sizeStyles[size].labelCurrent,
         truncate && 'tw:truncate',
-        current && 'tw:text-brand-secondary tw:group-hover:text-brand-secondary'
+        current &&
+          'tw:text-brand-secondary tw:group-hover:text-brand-secondary',
+        isSolid && solidStyles.label,
+        isSolid && current && solidStyles.labelSelected,
+        isSolid && isGroup && solidStyles.labelOpen
       )}>
       {children}
     </span>
@@ -113,14 +172,7 @@ export const NavItemBase = ({
 
   if (type === 'collapsible') {
     return (
-      <summary
-        className={cx(
-          'tw:px-3',
-          sizeStyles[size].padding,
-          styles.root,
-          current && styles.rootSelected
-        )}
-        onClick={onClick}>
+      <summary className={rootClassName} onClick={onClick}>
         {iconElement}
 
         {labelElement}
@@ -129,7 +181,11 @@ export const NavItemBase = ({
 
         <ChevronDown
           aria-hidden="true"
-          className="tw:ml-3 tw:size-4 tw:shrink-0 tw:stroke-[2.5px] tw:text-fg-quaternary tw:in-open:-scale-y-100"
+          className={cx(
+            'tw:ml-3 tw:size-4 tw:shrink-0 tw:stroke-[2.5px] tw:text-fg-quaternary tw:in-open:-scale-y-100',
+            isSolid && current && solidStyles.iconSelected,
+            isSolid && solidStyles.iconOpen
+          )}
         />
       </summary>
     );
@@ -139,18 +195,13 @@ export const NavItemBase = ({
     return (
       <AriaLink
         aria-current={current ? 'page' : undefined}
-        className={cx(
-          'tw:pr-3',
-          sizeStyles[size].childIndent,
-          sizeStyles[size].padding,
-          styles.root,
-          current && styles.rootSelected
-        )}
+        className={rootClassName}
         data-testid={dataTestId}
         href={href!}
         rel="noopener noreferrer"
         target={isExternal ? '_blank' : '_self'}
         onClick={onClick}>
+        {iconElement}
         {labelElement}
         {externalIcon}
         {badgeElement}
@@ -161,12 +212,7 @@ export const NavItemBase = ({
   return (
     <AriaLink
       aria-current={current ? 'page' : undefined}
-      className={cx(
-        'tw:px-3',
-        sizeStyles[size].padding,
-        styles.root,
-        current && styles.rootSelected
-      )}
+      className={rootClassName}
       data-testid={dataTestId}
       href={href!}
       rel="noopener noreferrer"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
index 7d72ccd090e8..6d6ae7a3f59e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
@@ -105,7 +105,14 @@ const LeftSidebar = () => {
   };
 
   const renderLeaf = (item: SidebarEntry, parentKey?: string) => {
-    if (!item.redirect_url) {
+    const handleSelect = () => {
+      navigateToItem(item, parentKey);
+      if (item.key === SidebarItem.LOGOUT) {
+        handleLogoutClick();
+      }
+    };
+
+    if (isSidebarCollapsed && !item.redirect_url) {
       return (
         <Button
           aria-label={t(item.title)}
@@ -113,14 +120,8 @@ const LeftSidebar = () => {
           data-testid={item.dataTestId}
           iconLeading={item.icon}
           size="md"
-          onPress={() => {
-            navigateToItem(item, parentKey);
-            if (item.key === SidebarItem.LOGOUT) {
-              handleLogoutClick();
-            }
-          }}>
-          {!isSidebarCollapsed && t(item.title)}
-        </Button>
+          onPress={handleSelect}
+        />
       );
     }
 
@@ -153,10 +154,11 @@ const LeftSidebar = () => {
         dataTestId={item.dataTestId}
         href={item.redirect_url}
         icon={item.icon}
-        size="sm"
+        size="lg"
         truncate={false}
         type={parentKey ? 'collapsible-child' : 'link'}
-        onClick={() => navigateToItem(item, parentKey)}>
+        variant="solid"
+        onClick={handleSelect}>
         {t(item.title)}
       </NavItemBase>
     );
@@ -234,6 +236,7 @@ const LeftSidebar = () => {
 
     return (
       <details
+        className="tw:rounded-xl tw:open:border tw:open:border-t-0 tw:open:border-brand-subtle"
         open={openKeys.includes(item.key)}
         onToggle={(event) => toggleGroup(item.key, event.currentTarget.open)}>
         <NavItemBase
@@ -241,17 +244,15 @@ const LeftSidebar = () => {
             selectedKeys.includes(child.key)
           )}
           icon={item.icon}
-          size="sm"
+          size="lg"
           truncate={false}
-          type="collapsible">
+          type="collapsible"
+          variant="solid">
           <span data-testid={item.dataTestId}>{t(item.title)}</span>
         </NavItemBase>
         <ul className="tw:m-0 tw:list-none tw:p-0">
           {item.children?.map((child) => (
-            <li
-              className="tw:py-1"
-              data-testid={`side-bar-${child.dataTestId}`}
-              key={child.key}>
+            <li data-testid={`side-bar-${child.dataTestId}`} key={child.key}>
               {renderLeaf(child, item.key)}
             </li>
           ))}
@@ -285,12 +286,9 @@ const LeftSidebar = () => {
       <div className="left-sidebar-layout">
         <Box className="menu-container" direction="col">
           <nav aria-label={t('label.navigation')} className="top-menu">
-            <ul className="left-sidebar-menu tw:m-0 tw:list-none tw:px-3 tw:py-0">
+            <ul className="left-sidebar-menu tw:m-0 tw:flex tw:list-none tw:flex-col tw:gap-2 tw:py-0 tw:ps-4 tw:pe-0">
               {sideBarItems.map((item) => (
-                <li
-                  className="tw:py-1.5"
-                  data-testid={`side-bar-${item.dataTestId}`}
-                  key={item.key}>
+                <li data-testid={`side-bar-${item.dataTestId}`} key={item.key}>
                   {item.children?.length ? renderGroup(item) : renderLeaf(item)}
                 </li>
               ))}
@@ -298,13 +296,11 @@ const LeftSidebar = () => {
           </nav>
           <nav
             aria-label={t('label.setting-plural')}
-            className="bottom-menu tw:px-3">
+            className="bottom-menu tw:ps-4">
             <Divider className="tw:my-2" />
-            <ul className="tw:m-0 tw:list-none tw:p-0">
+            <ul className="tw:m-0 tw:flex tw:list-none tw:flex-col tw:gap-2 tw:p-0">
               {[SETTING_ITEM, LOGOUT_ITEM].map((item) => (
-                <li className="tw:py-1" key={item.key}>
-                  {renderLeaf(item)}
-                </li>
+                <li key={item.key}>{renderLeaf(item)}</li>
               ))}
             </ul>
           </nav>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.test.tsx
index 9df044fb1959..081d801e79c6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.test.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 import LeftSidebar from './LeftSidebar.component';
 
@@ -45,4 +46,30 @@ describe('LeftSidebar', () => {
     expect(screen.getByTestId('app-bar-item-settings')).toBeInTheDocument();
     expect(screen.getByTestId('app-bar-item-logout')).toBeInTheDocument();
   });
+
+  it.each([
+    [
+      'click',
+      (user: ReturnType<typeof userEvent.setup>, el: HTMLElement) =>
+        user.click(el),
+    ],
+    [
+      'Enter',
+      async (user: ReturnType<typeof userEvent.setup>, el: HTMLElement) => {
+        el.focus();
+        await user.keyboard('{Enter}');
+      },
+    ],
+  ])('asks to confirm logout on %s', async (_, activate) => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(
+      <BrowserRouter>
+        <LeftSidebar />
+      </BrowserRouter>
+    );
+
+    await activate(user, screen.getByTestId('app-bar-item-logout'));
+
+    expect(await screen.findByTestId('confirm-logout')).toBeInTheDocument();
+  });
 });

From 34083c5574bfe92b0197811f7b7f91189f7a68cd Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 15 Oct 2026 16:24:12 +0530
Subject: [PATCH 4/5] fix(ui): let the classic sidebar sit on the page
 background

Drop the white bg-surface the core migration added to the classic aside
and keep solid-variant NavItemBase rest items transparent, so the rail
shows the #f8f9fc page background like the pre-migration sidebar.
---
 .../app-navigation/base-components/nav-item.test.tsx       | 7 +++++++
 .../app-navigation/base-components/nav-item.tsx            | 3 ++-
 .../MyData/LeftSidebar/LeftSidebar.component.tsx           | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
index cfab3741ad7c..391947598dfb 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
@@ -59,9 +59,16 @@ describe('NavItemBase', () => {
         <NavItemBase current href="/b" type="link">
           Default
         </NavItemBase>
+        <NavItemBase href="/c" type="link" variant="solid">
+          Resting
+        </NavItemBase>
       </>
     );
 
+    expect(screen.getByRole('link', { name: 'Resting' })).toHaveClass(
+      'tw:bg-transparent'
+    );
+
     expect(screen.getByRole('link', { name: 'Current' })).toHaveClass(
       'tw:bg-brand-solid'
     );
diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
index aefccfaa2893..487c14c19e66 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -19,7 +19,8 @@ export type NavItemVariant = 'default' | 'solid';
 // `solid` fills the current item with the brand colour and opens a collapsible
 // group under a filled header; hover tints rest items brand instead of gray.
 const solidStyles = sortCx({
-  root: 'tw:hover:bg-brand-primary_alt tw:dark:hover:bg-brand-primary_alt',
+  // Rest items sit on the sidebar surface instead of painting white boxes.
+  root: 'tw:bg-transparent tw:hover:bg-brand-primary_alt tw:dark:hover:bg-brand-primary_alt',
   rootSelected:
     'tw:bg-brand-solid tw:hover:bg-brand-solid tw:dark:bg-brand-solid tw:dark:hover:bg-brand-solid',
   groupSelected:
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
index 6d6ae7a3f59e..b85e782581e0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
@@ -263,7 +263,7 @@ const LeftSidebar = () => {
 
   return (
     <aside
-      className={classNames('app-sidebar tw:bg-surface', {
+      className={classNames('app-sidebar', {
         'sidebar-collapsed': isSidebarCollapsed,
         'left-sidebar-col-rtl': isDirectionRTL,
         'sidebar-open': !isSidebarCollapsed,

From 1015fa35fe1361bef46c5ff12b2757ef33db72d4 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 15 Oct 2026 17:40:37 +0530
Subject: [PATCH 5/5] fix(ui): match classic sidebar rest icon and label colour

The solid NavItemBase variant now renders resting icons and labels in
one mid-gray (fg-tertiary/text-tertiary), as the pre-migration classic
sidebar did, instead of core's lighter gray-400 icons and darker
gray-700 labels.
---
 .../app-navigation/base-components/nav-item.test.tsx         | 2 ++
 .../application/app-navigation/base-components/nav-item.tsx  | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
index 391947598dfb..60242778ebb6 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.test.tsx
@@ -68,6 +68,8 @@ describe('NavItemBase', () => {
     expect(screen.getByRole('link', { name: 'Resting' })).toHaveClass(
       'tw:bg-transparent'
     );
+    expect(screen.getByText('Resting')).toHaveClass('tw:text-tertiary');
+    expect(screen.getByText('Current')).toHaveClass('tw:text-primary_on-brand');
 
     expect(screen.getByRole('link', { name: 'Current' })).toHaveClass(
       'tw:bg-brand-solid'
diff --git a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
index 487c14c19e66..a948c7d0ef08 100644
--- a/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/openmetadata-ui-core-components/src/main/resources/ui/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -27,12 +27,13 @@ const solidStyles = sortCx({
     'tw:bg-brand-solid_hover tw:hover:bg-brand-solid_hover tw:dark:bg-brand-solid_hover tw:dark:hover:bg-brand-solid_hover',
   groupOpen:
     'tw:in-open:rounded-b-none tw:in-open:bg-brand-solid_hover tw:in-open:hover:bg-brand-solid_hover tw:dark:in-open:bg-brand-solid_hover',
-  label: 'tw:group-hover:text-brand-secondary',
+  // Rest label and icon share one mid-gray, as in the pre-migration classic sidebar.
+  label: 'tw:text-tertiary tw:group-hover:text-brand-secondary',
   labelSelected:
     'tw:text-primary_on-brand tw:group-hover:text-primary_on-brand',
   labelOpen:
     'tw:in-open:text-primary_on-brand tw:in-open:group-hover:text-primary_on-brand',
-  icon: 'tw:group-hover:text-fg-brand-secondary_alt',
+  icon: 'tw:text-fg-tertiary tw:group-hover:text-fg-brand-secondary_alt',
   iconSelected: 'tw:text-fg-white tw:group-hover:text-fg-white',
   iconOpen: 'tw:in-open:text-fg-white tw:in-open:group-hover:text-fg-white',
 });