From 16440a8a5619790c842c9e5d90a2b62242406cb3 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 10 Apr 2023 17:56:20 +0200
Subject: [PATCH] Add ellipsis for too long environment names in Recent
 activity

---
 .../EnvironmentPanel/EnvironmentTab/index.tsx              | 2 +-
 .../EnvironmentPanel/EnvironmentTab/styles.ts              | 7 +++++++
 src/components/RecentActivity/RecentActivity.stories.tsx   | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
index 2f7650b67..9c69dc9f7 100644
--- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx
@@ -14,7 +14,7 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => {
           <Badge />
         </s.BadgeContainer>
       )}
-      {props.text}
+      <s.Label title={props.text}>{props.text}</s.Label>
     </s.Container>
   );
 };
diff --git a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
index 74890a0b3..88fccf0b4 100644
--- a/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
+++ b/src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts
@@ -68,6 +68,13 @@ export const Container = styled.li<ContainerProps>`
   transition-timing-function: ease-out;
 `;
 
+export const Label = styled.span`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 110px;
+`;
+
 export const BadgeContainer = styled.div`
   position: absolute;
   top: -1px;
diff --git a/src/components/RecentActivity/RecentActivity.stories.tsx b/src/components/RecentActivity/RecentActivity.stories.tsx
index 9afde8c1b..1f6d9e63c 100644
--- a/src/components/RecentActivity/RecentActivity.stories.tsx
+++ b/src/components/RecentActivity/RecentActivity.stories.tsx
@@ -35,6 +35,7 @@ WithData.args = {
       "UNSET_ENV8",
       "UNSET_ENV9",
       "UNSET_ENV10",
+      "VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-VERY-LONG-NAME",
       "UNSET_ENV11"
     ],
     entries: [