style: enhance drag-and-drop cursor feedback

Author: CarloBu

src/components/PageTreeListView.client.tsx

@@ -1318,7 +1318,7 @@ export default function PageTreeListViewClient({
           isMovePending={isMovePending}
           titleCellAccessor={useAsTitle}
         />
-        <DragOverlay dropAnimation={null}>
+        <DragOverlay dropAnimation={null} style={{ cursor: 'grabbing' }}>
           {activeDragPreviewPath ? (
             <div className="pages-hierarchy-drag-overlay">{activeDragPreviewPath}</div>
           ) : null}

src/components/PageTreeListView.module.css

@@ -228,6 +228,7 @@
 }
 
 .root :global(.pages-hierarchy-cell__drag-handle) {
+  cursor: grab;
   margin-inline-end: 3px;
   touch-action: none;
 }
@@ -241,6 +242,11 @@
   color: var(--theme-text);
 }
 
+.root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
+.root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
+  cursor: grabbing;
+}
+
 .root :global(.pages-hierarchy-cell__drag-handle svg) {
   block-size: 0.95rem;
   inline-size: 0.95rem;
@@ -285,9 +291,10 @@
   font-size: 0.95rem;
   font-weight: 500;
   inline-size: max-content;
-  margin-inline-start: 1rem;
+  margin-inline-start: 2rem;
   padding: 0.65rem 0.85rem;
   pointer-events: none;
+  transform: translateY(calc(0.75rem - 50%));
   white-space: nowrap;
 }