FIxed overflow issues on sidebar's menu

changelog/+menu.fixed.md

@@ -0,0 +1,2 @@
+- Fixed issue causing a gap in menu sidebar when text is too long.
+- Prevent avatar from being cut off in menu sidebar.

frontend/app/src/shared/components/account-menu.tsx

@@ -172,7 +172,7 @@ const AuthenticatedAccountMenu = ({
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          className="h-auto w-full justify-start gap-2 hover:bg-indigo-50 rounded-lg p-2 overflow-hidden text-left"
+          className="h-auto w-full justify-start gap-2 hover:bg-indigo-50 rounded-lg p-2 overflow-hidden text-left shrink-0"
           data-testid="authenticated-menu-trigger"
         >
           <Avatar name={profile?.name?.value} className="h-10 w-10 shrink-0" />

frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-object.tsx

@@ -87,7 +87,10 @@ const TopLevelMenuItem: React.FC<{
 }> = ({ item, isCollapsed }) => {
   if (!item.children?.length) {
     return (
-      <Link to={constructPath(item.path)} className={menuNavigationItemStyle}>
+      <Link
+        to={constructPath(item.path)}
+        className={classNames(menuNavigationItemStyle, "w-[224px]")}
+      >
         <MenuItemIcon item={item} />
         <span className={classNames("text-sm", isCollapsed && "hidden")}>{item.label}</span>
       </Link>
@@ -96,7 +99,9 @@ const TopLevelMenuItem: React.FC<{
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className={classNames(menuNavigationItemStyle, isCollapsed && "p-2")}>
+      <DropdownMenuTrigger
+        className={classNames(menuNavigationItemStyle, isCollapsed ? "p-2" : "w-[224px]")}
+      >
         <Tooltip enabled={isCollapsed} content={item.label} side="right">
           <span className="flex">
             <MenuItemIcon item={item} />
@@ -123,10 +128,8 @@ const TopLevelMenuItem: React.FC<{
   );
 };
 
-export const MenuSectionObject: React.FC<MenuSectionObjectsProps> = ({ isCollapsed, items }) => (
-  <div className="flex flex-col w-full overflow-auto">
-    {items.map((item) => (
-      <TopLevelMenuItem key={item.identifier} item={item} isCollapsed={isCollapsed} />
-    ))}
-  </div>
-);
+export const MenuSectionObject: React.FC<MenuSectionObjectsProps> = ({ isCollapsed, items }) => {
+  return items.map((item) => (
+    <TopLevelMenuItem key={item.identifier} item={item} isCollapsed={isCollapsed} />
+  ));
+};