Jia/_/fix update and fix ui (#799)

jia-deriv · web-flow · commit 1f3c28e235eb · 2024-08-15T09:35:15.000+04:00
* fix: update and fix ui

* chore: update custom dropdown
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.44",
+    "@deriv-com/quill-ui": "^1.13.46",
     "@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
@@ -37,6 +37,7 @@ export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId
     <CustomDropdown
         value={currency}
         fullHeightOnOpen={false}
+        containerClassName='input-wrapper-container'
     >
         <CurrencyContent
             currency_list={currency_list}
diff --git a/src/javascript/app/pages/form/dropdown-component.jsx b/src/javascript/app/pages/form/dropdown-component.jsx
@@ -35,6 +35,7 @@ export const DropdownComponent = ({ label = '', options, value, onUpdate, elemen
         value={value}
         label={label}
         fullHeightOnOpen={false}
+        containerClassName='input-wrapper-container'
     >
         <DropdownContent
             options={options}
diff --git a/src/javascript/app/pages/form/numbers-dropdown.jsx b/src/javascript/app/pages/form/numbers-dropdown.jsx
@@ -28,6 +28,7 @@ export const NumbersDropdown = ({ value, label, start, end, elementId, onUpdate
         value={value}
         label={label}
         fullHeightOnOpen={false}
+        containerClassName='input-wrapper-container'
     >
         <Content
             value={value}
diff --git a/src/javascript/app/pages/form/time-selection.jsx b/src/javascript/app/pages/form/time-selection.jsx
@@ -90,6 +90,7 @@ export const TimePickerDropdown = ({
             value={time}
             onClickDropdown={() => handleOpen(elementId)}
             fullHeightOnOpen={false}
+            containerClassName='input-wrapper-container'
         >
             <TimeContent
                 time={time}
diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss
@@ -1098,4 +1098,8 @@ html.test {
         position: absolute;
         top: -9999px;
     }
+}
+
+.input-wrapper-container {
+    width: 100%;
 }

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId`
`37`	`37`	`<CustomDropdown`
`38`	`38`	`value={currency}`
`39`	`39`	`fullHeightOnOpen={false}`
	`40`	`+ containerClassName='input-wrapper-container'`
`40`	`41`	`>`
`41`	`42`	`<CurrencyContent`
`42`	`43`	`currency_list={currency_list}`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export const DropdownComponent = ({ label = '', options, value, onUpdate, elemen`
`35`	`35`	`value={value}`
`36`	`36`	`label={label}`
`37`	`37`	`fullHeightOnOpen={false}`
	`38`	`+ containerClassName='input-wrapper-container'`
`38`	`39`	`>`
`39`	`40`	`<DropdownContent`
`40`	`41`	`options={options}`
Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ export const NumbersDropdown = ({ value, label, start, end, elementId, onUpdate`
`28`	`28`	`value={value}`
`29`	`29`	`label={label}`
`30`	`30`	`fullHeightOnOpen={false}`
	`31`	`+ containerClassName='input-wrapper-container'`
`31`	`32`	`>`
`32`	`33`	`<Content`
`33`	`34`	`value={value}`
Original file line number	Diff line number	Diff line change
`@@ -90,6 +90,7 @@ export const TimePickerDropdown = ({`
`90`	`90`	`value={time}`
`91`	`91`	`onClickDropdown={() => handleOpen(elementId)}`
`92`	`92`	`fullHeightOnOpen={false}`
	`93`	`+ containerClassName='input-wrapper-container'`
`93`	`94`	`>`
`94`	`95`	`<TimeContent`
`95`	`96`	`time={time}`
Original file line number	Diff line number	Diff line change
`@@ -1098,4 +1098,8 @@ html.test {`
`1098`	`1098`	`position: absolute;`
`1099`	`1099`	`top: -9999px;`
`1100`	`1100`	`}`
	`1101`	`+}`
	`1102`	`+`
	`1103`	`+.input-wrapper-container {`
	`1104`	`+ width: 100%;`
`1101`	`1105`	`}`