From 3805cd7d368b0dc41d2846031afc59835288fadb Mon Sep 17 00:00:00 2001
From: hiba-aldalaty <hibaaldalaty@gmail.com>
Date: Fri, 19 Nov 2021 10:32:06 +0000
Subject: [PATCH] Make dropdown items full height & width - make hit slop
 bigger

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
---
 .../src/layout/Sidebar/SubmenuItem.tsx               | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx
index e5c49c3b07..bdf62c225e 100644
--- a/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx
+++ b/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx
@@ -69,9 +69,13 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     alignItems: 'end',
   },
   dropdownItem: {
-    width: '72%',
-    margin: '10px 0 10px 0',
+    width: '100%',
+    padding: '10px 0 10px 0',
+  },
+  textContent: {
     color: theme.palette.navigation.color,
+    display: 'flex',
+    justifyContent: 'center',
   },
 }));
 
@@ -144,7 +148,9 @@ export const SubmenuItem = ({
                 onClick={closeSubmenu}
                 key={key}
               >
-                {object.title}
+                <Typography variant="subtitle2" className={classes.textContent}>
+                  {object.title}
+                </Typography>
               </Link>
             ))}
           </div>