fix(playlists): UAT round 1 — drag lag, an invisible default sort, dialog layout

- The dragged row trailed the cursor by 150ms. The row carried Tailwind's bare
  `transition` utility (copied from DataTable's <tr>), which animates TRANSFORM
  — exactly the property dnd-kit drives from the pointer. transition-colors now,
  and the row being dragged drops dnd-kit's own transition too.
- The list looked sorted by Channel when it was really in its stored order that
  happens to be channel-grouped, and nothing said so. Sorting by "#" ascending
  IS the stored order, so it is now the neutral state: the header shows a real
  arrow for it, cycling off any column lands back on it, and it stays the state
  where drag is enabled and no save is offered.
- A choice dialog with two or more actions stacks vertically. Side by side they
  wrapped raggedly, and the wrapped one read as a lesser second group when the
  two are peers. Cancel goes last, actions run least to most destructive.

frontend/src/components/playlistColumns.tsx

@@ -33,9 +33,13 @@ export function playlistColumns({
       key: "pos",
       header: "#",
       align: "right",
-      width: "3rem",
+      width: "4.5rem",
       nowrap: true,
       hideInCard: true,
+      // Sorting by "#" ascending is the stored order itself — that is what makes it a truthful
+      // default for the header arrow, and a one-click way back from any other sort.
+      sortable: true,
+      sortValue: indexOf,
       render: (v) => <span className="text-xs text-muted tabular-nums">{indexOf(v) + 1}</span>,
     },
     {