From f917bcaedd1411f5bf754c4bc25cf000a1ca6577 Mon Sep 17 00:00:00 2001
From: "aritro.ghosh" <aritro.ghosh@juspay.in>
Date: Mon, 21 Oct 2024 16:22:40 +0530
Subject: [PATCH] fix: add text overflow with ellipsis in dropdown

---
 src/Components/DropdownField.res        | 3 ++-
 src/Components/PaymentDropDownField.res | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index d34f3411c..3c9f5ef0b 100644
--- a/src/Components/DropdownField.res
+++ b/src/Components/DropdownField.res
@@ -119,6 +119,7 @@ let make = (
             background: disabled ? disbaledBG : themeObj.colorBackground,
             opacity: disabled ? "35%" : "",
             padding: themeObj.spacingUnit,
+            paddingRight: "22px",
             width: "100%",
           }
           name=""
@@ -126,7 +127,7 @@ let make = (
           disabled={readOnly || disabled}
           onChange=handleChange
           onFocus=handleFocus
-          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          className={`${inputClassStyles} ${className} w-full appearance-none outline-none overflow-hidden whitespace-nowrap text-ellipsis ${cursorClass}`}>
           {options
           ->Array.mapWithIndex((item, index) => {
             <option key={Int.toString(index)} value=item.value>
diff --git a/src/Components/PaymentDropDownField.res b/src/Components/PaymentDropDownField.res
index fc8e521eb..b5d931a06 100644
--- a/src/Components/PaymentDropDownField.res
+++ b/src/Components/PaymentDropDownField.res
@@ -88,7 +88,7 @@ let make = (
           style={
             background: disabled ? disbaledBG : themeObj.colorBackground,
             opacity: disabled ? "35%" : "",
-            padding: "11px 20px 11px 11px",
+            padding: "11px 22px 11px 11px",
             width: "100%",
           }
           name=""
@@ -96,7 +96,7 @@ let make = (
           disabled={readOnly || disabled}
           onFocus={handleFocus}
           onChange=handleChange
-          className={`${inputClassStyles} ${inputClass} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          className={`${inputClassStyles} ${inputClass} ${className} w-full appearance-none outline-none overflow-hidden whitespace-nowrap text-ellipsis ${cursorClass}`}>
           {options
           ->Array.mapWithIndex((item: string, i) => {
             <option key={Int.toString(i)} value=item> {React.string(item)} </option>