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;