From e5976071eae1c2164d788832fb883762148cc54f Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Thu, 2 Dec 2021 17:10:00 -0500
Subject: [PATCH] fix(sidebar): use ellipsis styling for overflowed text

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/olive-pens-poke.md                         | 5 +++++
 packages/core-components/src/layout/Sidebar/Items.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/olive-pens-poke.md

diff --git a/.changeset/olive-pens-poke.md b/.changeset/olive-pens-poke.md
new file mode 100644
index 0000000000..8a009af971
--- /dev/null
+++ b/.changeset/olive-pens-poke.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Use ellipsis style for overflowed text in sidebar menu
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index a41c3e4bdd..903053eda4 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -235,7 +235,7 @@ const SidebarItemWithSubmenu = ({
         {itemIcon}
       </div>
       {text && (
-        <Typography variant="subtitle2" className={classes.text}>
+        <Typography variant="subtitle2" className={classes.label}>
           {text}
         </Typography>
       )}
@@ -402,7 +402,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
         {itemIcon}
       </div>
       {text && (
-        <Typography variant="subtitle2" className={classes.text}>
+        <Typography variant="subtitle2" className={classes.label}>
           {text}
         </Typography>
       )}