From 46548d3846281d34b98c5516636502377148ad8e Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Thu, 11 Jul 2024 18:33:20 +0800
Subject: [PATCH] chore: fix width issues for dropdown

---
 src/components/Dropdown/Dropdown.scss | 10 +++++++---
 src/components/Dropdown/index.tsx     |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 8f0eb8f1..d4494bb9 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -1,5 +1,5 @@
 .deriv-dropdown {
-    width: 100%;
+    display: inline-block;
     position: relative;
     cursor: pointer;
 
@@ -11,6 +11,10 @@
         }
     }
 
+    &--full {
+        width: 100%;
+    }
+
     &__button {
         display: flex;
         align-items: center;
@@ -19,10 +23,10 @@
     }
 
     &__chevron {
-        transition: all 0.3s ease-in-out;
+        transition: all 0.2s ease-in-out;
 
         &--open {
-            transform: rotate(-180deg);
+            transform: rotate(180deg);
         }
 
         &--disabled {
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index ab81387e..3acac840 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -139,6 +139,7 @@ export const Dropdown = ({
         <div
             className={clsx("deriv-dropdown", {
                 "deriv-dropdown--disabled": disabled,
+                "deriv-dropdown--full": isFullWidth,
             })}
             {...getToggleButtonProps()}
         >
@@ -169,6 +170,7 @@ export const Dropdown = ({
                     }
                     type="text"
                     value={value}
+                    isFullWidth={isFullWidth}
                     {...getInputProps()}
                     {...rest}
                 />