@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -1,181 +1,458 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import Checkbox from '../../../Checkbox.svelte';
-	import Icon from '../../../Icon.svelte';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import { Size } from '../../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import type { ColumnListRowProps } from './ColumnListRowProps.js';
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const { columnDef }: ColumnListRowProps<T> = $props();
-
-	const isExpandColumn = $derived(columnDef?.columnType === 'Expand');
-
-	let isBeingTargeted = $state(false);
-
-	function disableDragVisual() {
-		isBeingTargeted = false;
-	}
-
-	function makeKVPairs(item: string, index: number): readonly [string, number] {
-		return [item, index];
-	}
-	function togglePinLeft() {
-		if (columnDef == null) {
-			return;
-		}
-
-		tableContext.setColumnPinning((pinning) => {
-			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
-			const left = [...(pinning.left?.keys() ?? [])];
-			if (leftPinIndex !== -1) {
-				left.splice(leftPinIndex, 1);
-			} else {
-				left.push(columnDef.id);
-			}
-
-			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
-			const right = [...(pinning.right?.keys() ?? [])];
-			if (rightPinIndex !== -1) {
-				right.splice(rightPinIndex, 1);
-			}
-			return {
-				...pinning,
-				left: new Map(left.map(makeKVPairs)),
-				right: new Map(right.map(makeKVPairs)),
-			};
-		});
-	}
-
-	function togglePinRight() {
-		if (columnDef == null) {
-			return;
-		}
-
-		tableContext.setColumnPinning((pinning) => {
-			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
-			const right = [...(pinning.right?.keys() ?? [])];
-
-			if (rightPinIndex !== -1) {
-				right.splice(rightPinIndex, 1);
-			} else {
-				right.push(columnDef.id);
-			}
-
-			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
-			const left = [...(pinning.left?.keys() ?? [])];
-			if (leftPinIndex !== -1) {
-				left.splice(leftPinIndex, 1);
-			}
-
-			return {
-				...pinning,
-				left: new Map(left.map(makeKVPairs)),
-				right: new Map(right.map(makeKVPairs)),
-			};
-		});
-	}
-
-	const onVisibilityChange = (e: Event) => {
-		if (!columnDef) {
-			console.warn('no def found', e);
-
-			return;
-		}
-		tableContext.updateVisibility((defs) => {
-			defs[columnDef.id] = (e.target as HTMLInputElement).checked;
-			return defs;
-		});
-	};
-</script>
-
-{#if columnDef}
-	<li
-		class="single-column"
-		class:targeted={isBeingTargeted}
-		id="{tableContext.tableName}-column-settings-{columnDef.id}"
-		draggable={tableContext.allowColumnReordering}
-		ondragstart={() => {
-			tableContext.dragTarget = columnDef;
-		}}
-		ondragend={disableDragVisual}
-		ondragover={(e) => {
-			e.preventDefault();
-			if (tableContext.dragTarget?.id !== columnDef.id) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	>
-		<Checkbox
-			icon={{ name: 'assessment' }}
-			id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-			value={tableContext.columnVisibility[columnDef.id] !== false}
-			onchange={onVisibilityChange}
-		/>
-
-		{#if tableContext.allowColumnReordering}
-			<!-- value={tableContext.columnPinning.left?.has(columnDef.id) ?? false} -->
-			<Checkbox
-				disabled={isExpandColumn}
-				icon={{ name: 'pin-left' }}
-				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.left?.has(columnDef.id) || false}
-				onchange={() => {
-					togglePinLeft();
-				}}
-			/>
-			<!-- value={tableContext.columnPinning.right?.has(columnDef.id) ?? false} -->
-			<Checkbox
-				disabled={isExpandColumn}
-				icon={{ name: 'pin-right' }}
-				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.right?.has(columnDef.id) || false}
-				onchange={() => {
-					togglePinRight();
-				}}
-			/>
-			<div
-				id={`drag-handle-${tableContext.tableName}-${columnDef.id}`}
-				style="display: flex; cursor: move;"
-			>
-				<Icon
-					name="handle"
-					size={Size.Large}
-				/>
-			</div>
-		{/if}
-		{#if typeof columnDef.header === 'function'}
-			<!-- FIXME this needs testing -->
-			{@render columnDef.header()}
-			<!-- <span>{columnDef.id}</span> -->
-		{:else}
-			<span>{columnDef.header}</span>
-		{/if}
-	</li>
-{:else}
-	<li
-		id="{tableContext.tableName}-column-settings-top-anchor"
-		class="single-column anchor"
-		class:targeted={isBeingTargeted}
-		ondragover={(e) => {
-			e.preventDefault();
-
-			if (tableContext.dragTarget?.id !== undefined) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	></li>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Action from '../../../Action.svelte';
+	import Checkbox from '../../../Checkbox.svelte';
+	import ThreeStateRadio from '../../../ThreeStateRadio.svelte';
+	import { ColumnType } from '../../Types/Columns/ColumnType.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
+	import { Size } from '../../../../Types/Internal/Size.js';
+	import { Ternary } from '../../../../Types/Internal/Ternary.js';
+	import { getContext } from 'svelte';
+	import type { ColumnListRowProps } from './ColumnListRowProps.js';
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const { columnDef }: ColumnListRowProps<T> = $props();
+
+	const isExpandColumn = $derived(columnDef?.columnType === ColumnType.Expand);
+
+	/**
+	 * Position of this column inside the sorted column list, used to
+	 * drive the disabled state of the "move up" / "move down" buttons
+	 * (and to know which target index to pass `moveColumnTo`). The
+	 * underlying `index` property is a stable identity for layout
+	 * pinning, so we sort by it rather than relying on iteration
+	 * order from the `columnDefs` array.
+	 */
+	const sortedColumns = $derived(tableContext.columnDefs.slice().sort((a, b) => a.index - b.index));
+	const currentIndex = $derived(
+		columnDef == null ? -1 : sortedColumns.findIndex((it) => it.id === columnDef.id)
+	);
+	const isAtTop = $derived(currentIndex <= 0);
+	const isAtBottom = $derived(currentIndex === -1 || currentIndex >= sortedColumns.length - 1);
+
+	function moveUp(): void {
+		if (columnDef == null || isAtTop) {
+			return;
+		}
+		preserveListScroll(() => {
+			tableContext.moveColumnTo(currentIndex, currentIndex - 1);
+		});
+	}
+
+	function moveDown(): void {
+		if (columnDef == null || isAtBottom) {
+			return;
+		}
+		preserveListScroll(() => {
+			tableContext.moveColumnTo(currentIndex, currentIndex + 1);
+		});
+	}
+
+	let isBeingTargeted = $state(false);
+	/** Bound `<li>` element used by `preserveListScroll` to find the
+	 *  enclosing `.column-list` even when the event target is the
+	 *  visibility checkbox's hidden `<input>` (which is
+	 *  `position: absolute` with no positioned ancestor and therefore
+	 *  drifts away from the row in the layout tree). */
+	let rowEl: HTMLLIElement | undefined = $state();
+
+	function disableDragVisual() {
+		isBeingTargeted = false;
+	}
+
+	function makeKVPairs(item: string, index: number): readonly [string, number] {
+		return [item, index];
+	}
+
+	/**
+	 * Pre-click scroll snapshot. The key insight: when the user
+	 * clicks a checkbox label, the browser fires a synthetic click
+	 * on the associated hidden `<input>` *before* `onchange` fires.
+	 * The synthetic click focuses the input, and the focus side
+	 * effect already scrolls the column-list (and sometimes the
+	 * window) to bring the 1x1px, `clip-path`-ed input's bounding
+	 * box into view. By the time our `onchange` handler runs, the
+	 * scroll has already happened, so reading `scrollTop` at that
+	 * point gives us the *post-jump* position - "restoring" to it
+	 * just freezes the list at the wrong spot.
+	 *
+	 * Snapshotting on `mousedown` (which fires before the focus
+	 * step) captures the genuine pre-click position. We then use
+	 * that snapshot to restore at multiple time points after the
+	 * mutation so any further focus / layout shift gets undone.
+	 */
+	let preClickListScroll = 0;
+	let preClickWindowScrollX = 0;
+	let preClickWindowScrollY = 0;
+	/** Milliseconds `Date.now()` stamp of the last `snapshotScrollPosition`
+	 *  call. Lets `preserveListScroll` tell apart "click triggered toggle
+	 *  whose mousedown just snapshotted real pre-click state" from
+	 *  "keyboard or other path where the mousedown snapshot is stale". */
+	let lastSnapshotAt = 0;
+
+	/** Stale snapshots more than this many ms old are ignored. Tuned
+	 *  loose enough to survive any focus / click latency the browser
+	 *  might insert, but tight enough that an old click from minutes
+	 *  ago can't poison a later keyboard toggle. */
+	const SNAPSHOT_FRESHNESS_MS = 500;
+
+	function snapshotScrollPosition(): void {
+		const list = rowEl?.closest('.column-list') as HTMLElement | null;
+		preClickListScroll = list?.scrollTop ?? 0;
+		preClickWindowScrollX = typeof window !== 'undefined' ? window.scrollX : 0;
+		preClickWindowScrollY = typeof window !== 'undefined' ? window.scrollY : 0;
+		lastSnapshotAt = Date.now();
+	}
+
+	function restoreScrollPosition(): void {
+		const list = rowEl?.closest('.column-list') as HTMLElement | null;
+		if (list != null) {
+			list.scrollTop = preClickListScroll;
+		}
+		if (typeof window !== 'undefined') {
+			window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
+		}
+	}
+
+	/**
+	 * Run `mutate` and then re-apply the pre-click scroll snapshot
+	 * aggressively across the next ~400ms so any deferred focus /
+	 * layout work that fights us at the tail of the event loop still
+	 * ends up at the user's original scroll position.
+	 *
+	 * The snapshot itself is taken in capture phase from the row's
+	 * `{@attach}` listener below, *before* the focus side effect has
+	 * a chance to scroll us. If `preserveListScroll` is invoked
+	 * without a recent mousedown (keyboard toggle, programmatic
+	 * call) we take a fresh snapshot here.
+	 *
+	 * In addition to the discrete `rAF` / `setTimeout` restores, a
+	 * temporary scroll listener installed on the list and the
+	 * window forcibly reverts any scroll event during the lock
+	 * window. The listener short-circuits when `scrollTop` is
+	 * already at the snapshot value, so it doesn't loop.
+	 *
+	 * The active hidden input is also blurred immediately after the
+	 * mutation so the browser stops treating it as the "currently
+	 * focused element to keep visible" on subsequent layout passes.
+	 */
+	function preserveListScroll(mutate: () => void): void {
+		if (Date.now() - lastSnapshotAt > SNAPSHOT_FRESHNESS_MS) {
+			snapshotScrollPosition();
+		}
+		const focused =
+			typeof document !== 'undefined' && document.activeElement instanceof HTMLElement
+				? document.activeElement
+				: null;
+		const list = rowEl?.closest('.column-list') as HTMLElement | null;
+		mutate();
+		if (focused != null && rowEl?.contains(focused) === true) {
+			focused.blur();
+		}
+		if (typeof requestAnimationFrame !== 'undefined') {
+			requestAnimationFrame(restoreScrollPosition);
+		}
+		setTimeout(restoreScrollPosition, 0);
+		setTimeout(restoreScrollPosition, 60);
+		setTimeout(restoreScrollPosition, 120);
+		setTimeout(restoreScrollPosition, 240);
+
+		// Scroll-lock: forcibly revert any rogue scroll for the next
+		// ~400ms. Anything inside this window that scrolls the list
+		// or the page (focus auto-scroll, scrollIntoView from a
+		// deferred reactive effect, etc.) is snapped back to the
+		// pre-click snapshot. The handler is a no-op when the value
+		// is already at the snapshot, so the restore call inside it
+		// does not retrigger.
+		if (list != null && typeof window !== 'undefined') {
+			const lockListHandler = (): void => {
+				if (list.scrollTop !== preClickListScroll) {
+					list.scrollTop = preClickListScroll;
+				}
+			};
+			const lockWindowHandler = (): void => {
+				if (window.scrollX !== preClickWindowScrollX || window.scrollY !== preClickWindowScrollY) {
+					window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
+				}
+			};
+			list.addEventListener('scroll', lockListHandler, { passive: true });
+			window.addEventListener('scroll', lockWindowHandler, { passive: true });
+			setTimeout(() => {
+				list.removeEventListener('scroll', lockListHandler);
+				window.removeEventListener('scroll', lockWindowHandler);
+			}, 400);
+		}
+	}
+
+	/**
+	 * Current pin state of this column expressed as a `Ternary` so the
+	 * three states (`pinned-left` / `unpinned` / `pinned-right`) map
+	 * cleanly onto `ThreeStateRadio`:
+	 *
+	 *   - `Ternary.False`   → pinned to the LEFT side  (leftmost segment)
+	 *   - `Ternary.Neutral` → unpinned                 (middle segment)
+	 *   - `Ternary.True`    → pinned to the RIGHT side (rightmost segment)
+	 */
+	const pinSide: Ternary = $derived(
+		columnDef == null
+			? Ternary.Neutral
+			: tableContext.columnPinning.left?.has(columnDef.id)
+				? Ternary.False
+				: tableContext.columnPinning.right?.has(columnDef.id)
+					? Ternary.True
+					: Ternary.Neutral
+	);
+
+	/**
+	 * Set this column's pin state from a `Ternary`. The previous
+	 * side (if any) is removed first so the column is never pinned
+	 * to both sides. Wrapped in `preserveListScroll` to keep the
+	 * column-list scroll position pinned across any focus side
+	 * effect inside the ThreeStateRadio's hidden inputs.
+	 */
+	function setPin(next: Ternary): void {
+		if (columnDef == null) {
+			return;
+		}
+		preserveListScroll(() => {
+			tableContext.setColumnPinning((pinning) => {
+				const leftKeys = [...(pinning.left?.keys() ?? [])].filter((id) => id !== columnDef.id);
+				const rightKeys = [...(pinning.right?.keys() ?? [])].filter((id) => id !== columnDef.id);
+				if (next === Ternary.False) {
+					leftKeys.push(columnDef.id);
+				} else if (next === Ternary.True) {
+					rightKeys.push(columnDef.id);
+				}
+				return {
+					...pinning,
+					left: new Map(leftKeys.map(makeKVPairs)),
+					right: new Map(rightKeys.map(makeKVPairs)),
+				};
+			});
+		});
+	}
+
+	const onVisibilityChange = (e: Event) => {
+		if (!columnDef) {
+			console.warn('no def found', e);
+
+			return;
+		}
+		const checked = (e.target as HTMLInputElement).checked;
+		preserveListScroll(() => {
+			tableContext.updateVisibility((defs) => {
+				defs[columnDef.id] = checked;
+				return defs;
+			});
+		});
+	};
+
+	/**
+	 * Keyboard reorder support for power users. Arrow keys nudge the
+	 * column up / down, Home / End jump to the ends. Bound on the row
+	 * itself so any focusable child (eye, pin selector, move buttons)
+	 * lets the user reorder without having to seek out a dedicated
+	 * "drag handle" - the affordance is now the explicit up / down
+	 * buttons in the row's right gutter.
+	 *
+	 * `Alt` is required as the modifier so plain arrow keys still
+	 * navigate radio groups inside the row (ThreeStateRadio) and the
+	 * row's own scroll container.
+	 */
+	function onRowKeydown(e: KeyboardEvent) {
+		if (!columnDef || !tableContext.allowColumnReordering) {
+			return;
+		}
+		if (!e.altKey) {
+			return;
+		}
+		if (currentIndex === -1) {
+			return;
+		}
+
+		const lastIndex = sortedColumns.length - 1;
+		let targetIndex: number;
+
+		switch (e.key) {
+			case 'ArrowUp':
+				targetIndex = Math.max(0, currentIndex - 1);
+				break;
+			case 'ArrowDown':
+				targetIndex = Math.min(lastIndex, currentIndex + 1);
+				break;
+			case 'Home':
+				targetIndex = 0;
+				break;
+			case 'End':
+				targetIndex = lastIndex;
+				break;
+			default:
+				return;
+		}
+
+		if (targetIndex === currentIndex) {
+			e.preventDefault();
+			return;
+		}
+
+		e.preventDefault();
+		preserveListScroll(() => {
+			tableContext.moveColumnTo(currentIndex, targetIndex);
+		});
+	}
+</script>
+
+{#if columnDef}
+	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+	<li
+		bind:this={rowEl}
+		class="single-column"
+		class:targeted={isBeingTargeted}
+		class:draggable={tableContext.allowColumnReordering}
+		id="{tableContext.tableName}-column-settings-{columnDef.id}"
+		draggable={tableContext.allowColumnReordering}
+		onkeydown={onRowKeydown}
+		{@attach (node: HTMLLIElement) => {
+			// Capture-phase listeners for `mousedown` and
+			// `pointerdown`. Both must fire BEFORE the synthetic
+			// click on the visibility / pin checkbox focuses its
+			// hidden input (which is what causes the browser to
+			// auto-scroll the column list to bring that input's
+			// 1x1px clip-pathed box into view). Capture phase runs
+			// before target / bubble phases, so this listener
+			// reliably snapshots the user's actual pre-click scroll
+			// position before any focus side effect lands.
+			//
+			// Both event types are wired because some browsers
+			// dispatch `pointerdown` before `mousedown` and others
+			// the reverse; whichever fires first wins (the second
+			// is a cheap no-op snapshot of the same state).
+			const snapshot = (): void => {
+				snapshotScrollPosition();
+			};
+			node.addEventListener('pointerdown', snapshot, { capture: true });
+			node.addEventListener('mousedown', snapshot, { capture: true });
+			return () => {
+				node.removeEventListener('pointerdown', snapshot, { capture: true });
+				node.removeEventListener('mousedown', snapshot, { capture: true });
+			};
+		}}
+		ondragstart={() => {
+			tableContext.dragTarget = columnDef;
+		}}
+		ondragend={disableDragVisual}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== columnDef.id) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	>
+		<div class="visibility-wrapper">
+			<Checkbox
+				icon={{ name: 'assessment', size: Size.Medium }}
+				size={Size.FillWidth}
+				id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+				value={tableContext.columnVisibility[columnDef.id] !== false}
+				onchange={onVisibilityChange}
+			/>
+		</div>
+
+		{#if tableContext.allowColumnReordering}
+			<!--
+				Tri-state pin selector rendered via `ThreeStateRadio`,
+				matching the visual segmented-control used elsewhere in
+				the table (filter Active state, etc.). The three
+				`Ternary` slots map to:
+				  False   → pinned LEFT  (pin-left icon, leftmost)
+				  Neutral → unpinned     (circle-cross icon, middle)
+				  True    → pinned RIGHT (pin-right icon, rightmost)
+				Expand columns can never be pinned, so the group goes
+				fully disabled for them.
+			-->
+			<div
+				class="pin-selector"
+				class:disabled={isExpandColumn}
+			>
+				<ThreeStateRadio
+					value={pinSide}
+					disabled={isExpandColumn}
+					noLabel="Pin to left"
+					neutralLabel="Unpinned"
+					yesLabel="Pin to right"
+					noIcon={{ name: 'pin-left', size: Size.Medium }}
+					neutralIcon={{ name: 'circle-cross', size: Size.Medium }}
+					yesIcon={{ name: 'pin-right', size: Size.Medium }}
+					onchange={(next: Ternary) => {
+						setPin(next);
+					}}
+				/>
+			</div>
+		{/if}
+
+		<span class="column-label">
+			{#if typeof columnDef.header === 'function'}
+				<!-- FIXME this needs testing -->
+				{@render columnDef.header()}
+			{:else}
+				{columnDef.header}
+			{/if}
+		</span>
+
+		{#if tableContext.allowColumnReordering}
+			<!--
+				Up / down "move" buttons make column reordering
+				discoverable without relying on the user noticing a
+				drag-cursor. The row remains draggable too (whole row
+				is the drag target now that the dedicated handle is
+				gone), so power users keep the drag-and-drop path.
+				Buttons disable at the list boundaries so we never
+				dispatch a no-op `moveColumnTo`.
+			-->
+			<div class="reorder-buttons">
+				<Action
+					icon={{ name: 'chevron-up', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label="Move {reorderLabel} up"
+					disabled={isAtTop}
+					onclick={moveUp}
+				/>
+				<Action
+					icon={{ name: 'chevron-down', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label="Move {reorderLabel} down"
+					disabled={isAtBottom}
+					onclick={moveDown}
+				/>
+			</div>
+		{/if}
+	</li>
+{:else}
+	<li
+		id="{tableContext.tableName}-column-settings-top-anchor"
+		class="single-column anchor"
+		class:targeted={isBeingTargeted}
+		ondragover={(e) => {
+			e.preventDefault();
+
+			if (tableContext.dragTarget?.id !== undefined) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	></li>
+{/if}
+
 <style>li {
   box-sizing: border-box;
 }
@@ -186,9 +463,65 @@ li.targeted {
   border-bottom: solid 2px #259fc7;
 }
 
-li.single-column {
+li.single-column:not(.anchor) {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+  align-items: center;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  position: relative;
+}
+li.single-column:not(.anchor).draggable {
+  cursor: grab;
+}
+li.single-column:not(.anchor).targeted {
+  border-color: #259fc7;
+  border-bottom-width: 2px;
+}
+
+li.single-column:not(.anchor):last-of-type {
+  margin-bottom: 0;
+}
+
+.visibility-wrapper {
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  flex-shrink: 0;
+}
+
+.pin-selector {
+  --input-height: 3rem;
+  --input-width: auto;
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+.pin-selector.disabled {
+  opacity: 0.5;
+}
+
+.column-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reorder-buttons {
+  flex-shrink: 0;
   display: flex;
-  gap: 1rem;
-  padding: 0.5rem 0.5rem;
+  flex-flow: column nowrap;
   align-items: center;
-}</style>
+  gap: 0.125rem;
+}
+.reorder-buttons :global(button[disabled]) {
+  --colour: #1f81a0;
+  color: #1f81a0;
+  background-color: transparent;
+}</style>