From 309f083bd62817d21900082a65e52c8c802a894d Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Mon, 23 Oct 2023 16:20:12 +0300
Subject: [PATCH] fix(SidebarItem): flex the container

---
 .../sidebar-item/sidebar-item.module.scss           | 13 +++++++++----
 src/components/sidebar-item/sidebar-item.tsx        |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar-item/sidebar-item.module.scss b/src/components/sidebar-item/sidebar-item.module.scss
index 176eb49..10968ec 100644
--- a/src/components/sidebar-item/sidebar-item.module.scss
+++ b/src/components/sidebar-item/sidebar-item.module.scss
@@ -1,6 +1,11 @@
-.name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.sidebarItem {
+  flex: 1;
   min-width: 0;
+
+  .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    min-width: 0;
+  }
 }
diff --git a/src/components/sidebar-item/sidebar-item.tsx b/src/components/sidebar-item/sidebar-item.tsx
index a9cd5c3..3b7a5b6 100644
--- a/src/components/sidebar-item/sidebar-item.tsx
+++ b/src/components/sidebar-item/sidebar-item.tsx
@@ -12,7 +12,7 @@ interface SidebarItemProps {
 
 const SidebarItem: React.FC<SidebarItemProps> = ({ children, status }) => {
   return (
-    <Flex justify={Flex.justify.SPACE_BETWEEN} gap={Flex.gaps.MEDIUM}>
+    <Flex className={styles.sidebarItem} justify={Flex.justify.SPACE_BETWEEN} gap={Flex.gaps.MEDIUM}>
       <span className={styles.name}>{children}</span>
       <StatusTag type={status} />
     </Flex>