From c71926a327e81562f37b18aee90bf083609bfaa9 Mon Sep 17 00:00:00 2001 From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com> Date: Wed, 30 Sep 2026 15:44:57 +0200 Subject: [PATCH] fix: show the column drag handle on hover only --- .../useResourceFilters/ColumnsMenuItems.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/app-elements/src/ui/resources/useResourceFilters/ColumnsMenuItems.tsx b/packages/app-elements/src/ui/resources/useResourceFilters/ColumnsMenuItems.tsx index d74982a45..c3053245b 100644 --- a/packages/app-elements/src/ui/resources/useResourceFilters/ColumnsMenuItems.tsx +++ b/packages/app-elements/src/ui/resources/useResourceFilters/ColumnsMenuItems.tsx @@ -236,6 +236,8 @@ function SortableColumnItem({ className={cn( "relative touch-none", "[&:hover>*:first-child]:bg-gray-100 [&:hover>*:first-child]:rounded", + // the handle shows on the row's hover, wherever the pointer is on it + "[&:hover>*:last-child]:opacity-100", { "z-10": isDragging }, )} > @@ -269,7 +271,11 @@ function SortableColumnItem({ // rest of the row keeps the pointer of a click. Pressing here drags the // row all the same, the event reaching the row's own listener. "flex text-gray-400 rounded cursor-grab", - // a keyboard user lands here on Tab, and has to see it + // Hidden at rest, so the menu reads as a list of columns rather than + // of handles: it shows on the row's hover (see above), for the row + // being moved, and for a keyboard user who lands here on Tab. + "opacity-0 focus-visible:opacity-100", + { "opacity-100!": isDragging }, "outline-hidden focus-visible:text-gray-800 focus-visible:bg-gray-100", )} > @@ -288,11 +294,6 @@ function LockedColumnItem({ entry }: { entry: TableColumnEntry }): JSX.Element { disabled aria-disabled /> - {/* no handle to grab, only its outline, so the column reads as part of - the list and stays aligned with the others */} - - - ) }