Fast follow on draggable column re-order (#1667)

front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -28,6 +28,7 @@ export const MenuItemLeftContent = ({
         <IconGripVertical
           size={theme.icon.size.md}
           stroke={theme.icon.stroke.sm}
+          color={theme.font.color.extraLight}
         />
       )}
       {LeftIcon && (

front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -57,11 +57,26 @@ export const ViewFieldsVisibilityDropdownSection = <
                         draggableId={field.key}
                         index={index}
                       >
-                        {(provided) => (
+                        {(draggableProvided) => {
+                          const draggableStyle =
+                            draggableProvided.draggableProps.style;
+
+                          return (
                             <div
-                            ref={provided.innerRef}
+                              ref={draggableProvided.innerRef}
-                            {...provided.draggableProps}
+                              {...{
-                            {...provided.dragHandleProps}
+                                ...draggableProvided.draggableProps,
+                                style: {
+                                  ...draggableStyle,
+                                  left: 'auto',
+                                  top: 'auto',
+                                  transform: draggableStyle?.transform?.replace(
+                                    /\(-?\d+px,/,
+                                    '(0,',
+                                  ),
+                                },
+                              }}
+                              {...draggableProvided.dragHandleProps}
                             >
                               <MenuItem
                                 isDraggable={isDraggable}
@@ -69,14 +84,17 @@ export const ViewFieldsVisibilityDropdownSection = <
                                 LeftIcon={field.Icon}
                                 iconButtons={[
                                   {
-                                  Icon: field.isVisible ? IconMinus : IconPlus,
+                                    Icon: field.isVisible
+                                      ? IconMinus
+                                      : IconPlus,
                                     onClick: () => onVisibilityChange(field),
                                   },
                                 ]}
                                 text={field.name}
                               />
                             </div>
-                        )}
+                          );
+                        }}
                       </Draggable>
                     ))}
                     {provided.placeholder}