fix: actionsheet height to be content size

deriv-com · Aug 6, 2024 · 773e10a · 773e10a
1 parent 4ef9b9d
commit 773e10a
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.1",
-    "@deriv-com/quill-ui": "^1.13.37",
+    "@deriv-com/quill-ui": "^1.13.39",
     "@deriv/deriv-api": "^1.0.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",

diff --git a/src/javascript/app/pages/form/currency-dropdown.jsx b/src/javascript/app/pages/form/currency-dropdown.jsx
@@ -26,7 +26,10 @@ const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
     );
 };
 export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId }) => (
-    <CustomDropdown value={currency}>
+    <CustomDropdown
+        value={currency}
+        fullHeightOnOpen={false}
+    >
         <CurrencyContent
             currency_list={currency_list}
             currency={currency}

diff --git a/src/javascript/app/pages/form/dropdown-component.jsx b/src/javascript/app/pages/form/dropdown-component.jsx
@@ -29,7 +29,11 @@ const DropdownContent = ({ options, value, onUpdate, elementId }) => {
     );
 };
 export const DropdownComponent = ({ label = '', options, value, onUpdate, elementId }) => (
-    <CustomDropdown value={value} label={label}>
+    <CustomDropdown
+        value={value}
+        label={label}
+        fullHeightOnOpen={false}
+    >
         <DropdownContent
             options={options}
             value={value}

diff --git a/src/javascript/app/pages/form/form-component.jsx b/src/javascript/app/pages/form/form-component.jsx
@@ -226,6 +226,7 @@ export const FormComponent = () => {
                                                                 onSelectDate={(value) => {
                                                                     onExpiryDateChange(value);
                                                                 }}
+                                                                fullHeightOnOpen={false}
                                                             />
                                                         ) : (
                                                             <DropdownComponent

diff --git a/src/javascript/app/pages/form/numbers-dropdown.jsx b/src/javascript/app/pages/form/numbers-dropdown.jsx
@@ -22,7 +22,11 @@ const Content = ({ value, start, end, elementId, onUpdate }) => {
 };
 
 export const NumbersDropdown = ({ value, label, start, end, elementId, onUpdate }) => (
-    <CustomDropdown value={value} label={label}>
+    <CustomDropdown
+        value={value}
+        label={label}
+        fullHeightOnOpen={false}
+    >
         <Content
             value={value}
             start={start}

diff --git a/src/javascript/app/pages/form/time-selection.jsx b/src/javascript/app/pages/form/time-selection.jsx
@@ -82,7 +82,11 @@ export const TimePickerDropdown = ({
     };
 
     return (
-        <CustomDropdown value={time} onClickDropdown={() => handleOpen(elementId)}>
+        <CustomDropdown
+            value={time}
+            onClickDropdown={() => handleOpen(elementId)}
+            fullHeightOnOpen={false}
+        >
             <TimeContent
                 time={time}
                 onUpdate={onUpdate}

diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
@@ -198,6 +198,10 @@ body {
         scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
         border-radius: var(--core-borderRadius-500);
 
+        @media(max-width: 768px){
+            max-height: unset;
+        }
+
         &::-webkit-scrollbar {
             scrollbar-width: thin;
             width: var(--core-size-200);