fix: hover color and border radius for remove icon

Author: eshankvaish

src/Shared/Components/SelectPicker/common.tsx

@@ -175,7 +175,7 @@ export const SelectPickerMenuList = ({
             <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
             {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
             {!shouldRenderCustomOptions && renderMenuListFooter && (
-                <div className=" dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0">
+                <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0 dc__zi-2">
                     {renderMenuListFooter()}
                 </div>
             )}
@@ -192,7 +192,7 @@ export const SelectPickerMultiValueLabel = ({
     const iconToDisplay = isOptionValid ? data.startIcon || data.endIcon : <ICErrorExclamation />
 
     return (
-        <div className="flex dc__gap-4 mw-0">
+        <div className="flex dc__gap-4 mw-0 dc__truncate">
             {iconToDisplay && (
                 <div
                     className={`dc__no-shrink ${selectProps.isMulti ? 'icon-dim-16' : 'icon-dim-20'} flex dc__fill-available-space`}

src/Shared/Components/SelectPicker/utils.ts

@@ -167,7 +167,7 @@ export const getCommonSelectStyle = ({
         padding: '0',
         fontWeight: '400',
         ...(state.selectProps.isMulti && {
-            gap: '8px',
+            gap: '6px',
         }),
     }),
     multiValue: (base, state) => {
@@ -202,8 +202,9 @@ export const getCommonSelectStyle = ({
         borderRadius: 0,
 
         '&:hover': {
-            backgroundColor: 'transparent',
+            backgroundColor: 'var(--R100)',
             color: 'inherit',
+            borderRadius: '2px',
 
             'svg use': {
                 fill: 'var(--R500)',