From 4555b66d9680c4cac71284bcfbb9dd08d26326db Mon Sep 17 00:00:00 2001
From: Bhumik Prajapati <57754267+BhumikP@users.noreply.github.com>
Date: Wed, 11 Oct 2023 15:41:09 +0530
Subject: [PATCH] Fix long text issue on people dropdown picker (#1923)

* Fix long text issue on people dropdown picker

* Fix checkmark shrink for long text

* remove width to not shrink image

* fix: remove width 100% from StyledMenuItemLabel
---
 .../ui/menu-item/internals/components/StyledMenuItemBase.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx b/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
index 1d9729d3d..d6d4aae80 100644
--- a/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -65,8 +65,11 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
 export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
+  overflow: hidden;
   padding-left: ${({ theme, hasLeftIcon }) =>
     hasLeftIcon ? '' : theme.spacing(1)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const StyledNoIconFiller = styled.div`
@@ -80,6 +83,8 @@ export const StyledMenuItemLeftContent = styled.div`
   flex-direction: row;
 
   gap: ${({ theme }) => theme.spacing(1)};
+  min-width: 0;
+  width: 100%;
 `;
 
 export const StyledMenuItemRightContent = styled.div`