From 93815e1b0d82e747d83fa12758bbf1f46edb7d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 12 Dec 2023 14:33:10 +0100
Subject: [PATCH] :bug: fix text not being truncated with an ellipsis in the
 interactions panel

---
 frontend/src/app/main/ui/components/select.scss      | 12 +++++++-----
 .../sidebar/options/menus/interactions.scss          |  6 +++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 291e239cf..630619a70 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -9,7 +9,8 @@
 .custom-select {
   @include titleTipography;
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
   height: $s-32;
   width: 100%;
@@ -20,10 +21,7 @@
   border: $s-1 solid var(--menu-background-color);
   color: var(--menu-foreground-color);
   cursor: pointer;
-  .current-label {
-    width: 100%;
-    flex-grow: 1;
-  }
+
   .current-icon {
     @include flexCenter;
     height: $s-24;
@@ -109,3 +107,7 @@
     }
   }
 }
+
+.current-label {
+  @include textEllipsis;
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index 077c816fc..78b905d5e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -47,8 +47,6 @@
         }
       }
     }
-
-
   }
   .element-set {
     @include flexColumn;
@@ -65,11 +63,14 @@
 
 .interactions-info {
   flex-grow: 1;
+  display: grid;
+
   .trigger-name {
     color: var(--color-foreground-primary);
   }
   .action-summary {
     color: var(--color-foreground-secondary);
+    @include textEllipsis;
   }
 }
 
@@ -216,7 +217,6 @@
       }
     }
 
-
     .remove-btn {
       @extend .button-tertiary;
       height: $s-32;