diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css b/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css
index c30a7a446a..9d232488ef 100644
--- a/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css
+++ b/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css
@@ -6,3 +6,16 @@
.badge {
margin: 0 10px;
}
+
+.root:hover,
+.root:focus,
+.highlighted-row,
+.highlighted-row:hover,
+.highlighted-row:focus {
+ background-color: #cbdded;
+ text-decoration: none;
+}
+
+.highlighted-row:hover {
+ cursor: unset;
+}
diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx b/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx
index 97bc7789ee..f0cc17749b 100644
--- a/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx
+++ b/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx
@@ -23,14 +23,21 @@ export const JobStatusNav: React.FC = () => {
borderRight: '1px solid var(--global-color-primary--normal)',
};
return (
-
+
+ isActive ? styles['highlighted-row'] : styles.root
+ }
+ >
+
+
);
};
diff --git a/client/src/styles.css b/client/src/styles.css
index 2681655d02..dc3eefef48 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -132,7 +132,7 @@
}
/* DO scroll app category menu */
-.ant-layout-sider-children > header + div + ul {
+.ant-layout-sider-children > a + div + ul {
overflow: auto;
height: 100%;
}