The grab cursor only covers the column name in the Live Data table headers, while the whole header can be dragged

In a Live Data table, a column can be reordered by dragging its header, but the grab cursor only shows on a small part of that header.

The drag starts from anywhere in the header name area, which spans the full width of the column, while the grab cursor is only set on the column name button, which is as wide as the name and the sort icon. Over the rest of the header, the cursor stays the default arrow even though a drag starts from there, so nothing tells the user that this part of the header can be dragged.

Steps to reproduce

1. Open a page holding a Live Data table, for instance the "Children" tab of a page with children.
2. Hover the header of a wide column, first over its name, then over the empty space to the right of the name.
3. Drag the column header from that empty space.

Expected: the grab cursor shows over the whole area a drag can start from.
Actual: it only shows over the column name, yet the drag works from the empty space too.

Cause

LayoutTableHeaderNames.vue sets handle=".column-name" on the draggable component, so the whole .column-name block accepts the drag. The cursor: grab rule comes from XWikiDraggableItem.vue and targets .draggable-item .handle, which in the table header is the inner <button class="handle"> only.

Reported by mleduc  in the forum discussion of XWIKI-24755: https://forum.xwiki.org/t/proposal-move-up-move-down-buttons-in-the-class-editor/18809/2