From ed254ba1c8fa04d782f920d3d17e0138a56768b4 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Wed, 18 Dec 2024 19:21:37 +0100
Subject: [PATCH] fix(ui): handle long text in `BuilderSelect`

The `BuilderSelect` trigger has overflow issues with long text
containing breakable content. The trick was just a missing `white-space:
nowrap` rule.

I also took the opportunity to add a tooltip to the `BuilderSelect`'s
trigger.
---
 src/ui/src/builder/BuilderSelect.vue  | 2 ++
 src/ui/src/builder/BuilderTooltip.vue | 1 +
 src/ui/src/wds/WdsDropdownMenu.vue    | 1 +
 3 files changed, 4 insertions(+)

diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 5eb9ca793..1e546c1b0 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -3,6 +3,7 @@
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
+			:data-writer-tooltip="currentLabel"
 			@click="isOpen = !isOpen"
 		>
 			<i v-if="!hideIcons" class="material-symbols-outlined">{{
@@ -141,6 +142,7 @@ function onSelect(value: string) {
 	overflow: hidden;
 	flex-grow: 1;
 	text-align: left;
+	white-space: nowrap;
 }
 .BuilderSelect__trigger__arrow {
 	border: none;
diff --git a/src/ui/src/builder/BuilderTooltip.vue b/src/ui/src/builder/BuilderTooltip.vue
index cbca66472..2420db696 100644
--- a/src/ui/src/builder/BuilderTooltip.vue
+++ b/src/ui/src/builder/BuilderTooltip.vue
@@ -131,6 +131,7 @@ onUnmounted(() => {
 	display: content;
 	max-width: 260px;
 	filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.16));
+	word-break: break-all;
 }
 
 .arrow {
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index 6633d8b70..d2b091a6c 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -138,6 +138,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 }
 .WdsDropdownMenu__item__label {
 	text-overflow: ellipsis;
+	white-space: nowrap;
 	overflow: hidden;
 	text-align: left;
 }