chore: fix width issues for dropdown

deriv-com · Jul 11, 2024 · 46548d3 · 46548d3
1 parent 83dbde7
commit 46548d3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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}
                 />