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