From 12e267ad81e580f233b7e60ea6ef9b132f799ee4 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Fri, 26 Apr 2024 04:36:11 +0800
Subject: [PATCH] Truncate dropdown value (#602)

* truncate dropdown value

* more defensive programming for width
---
 src/app/common/elements/dropdown.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/common/elements/dropdown.tsx b/src/app/common/elements/dropdown.tsx
index 9adbad31..306fe858 100644
--- a/src/app/common/elements/dropdown.tsx
+++ b/src/app/common/elements/dropdown.tsx
@@ -258,7 +258,11 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                   document.getElementById("app")!
               )
             : null;
-
+        let selectedOptionLabelStyle = {};
+        const wrapperClientWidth = this.wrapperRef.current?.clientWidth;
+        if ((wrapperClientWidth ?? 0) > 0) {
+            selectedOptionLabelStyle["width"] = Math.max(wrapperClientWidth - 55, 0);
+        }
         return (
             <div
                 className={cn("wave-dropdown", className, {
@@ -284,7 +288,10 @@ class Dropdown extends React.Component<DropdownProps, DropdownState> {
                     </div>
                 </If>
                 <div
-                    className={cn("wave-dropdown-display unselectable", { "offset-left": decoration?.startDecoration })}
+                    className={cn("wave-dropdown-display unselectable truncate", {
+                        "offset-left": decoration?.startDecoration,
+                    })}
+                    style={selectedOptionLabelStyle}
                 >
                     {selectedOptionLabel}
                 </div>