@flamingo-stack/openframe-frontend-core 0.0.579-1952.5335.1 → 0.0.579

package/src/components/features/sortable-list/use-sortable-item.ts

@@ -15,14 +15,23 @@ export interface SortableItem {
    * clicking inside the item keep working, and it carries the keyboard
    * alternative — so spread it rather than picking it apart.
    */
-  dragHandleProps: {
-    // Callback refs, not `Ref<HTMLElement>`: a ref OBJECT of the wider type
-    // cannot be attached to a `<button>` or a `<div>`, a callback taking the
-    // wider type can.
-    ref: (node: HTMLElement | null) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
-  };
+  dragHandleProps: SortableDragHandleProps;
   isDragging: boolean;
+  /**
+   * The input-type gate: `false` on touch/narrow viewports (and during SSR).
+   * When `false` the item registers no drag at all — render explicit move
+   * controls (`SortableMoveButtons`) instead of the drag handle.
+   */
+  dragAndDropEnabled: boolean;
+}
+
+/** What `dragHandleProps` carries — spread it onto the grip, don't pick it apart. */
+export interface SortableDragHandleProps {
+  // Callback refs, not `Ref<HTMLElement>`: a ref OBJECT of the wider type
+  // cannot be attached to a `<button>` or a `<div>`, a callback taking the
+  // wider type can.
+  ref: (node: HTMLElement | null) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 
 /**
@@ -38,7 +47,10 @@ export interface SortableItem {
  * screen-reader users, who hear the result from the list's live region.
  */
 export function useSortableItem(): SortableItem {
-  const { dragType, disabled, reorder, readItems } = useSortableListContext();
+  const { dragType, disabled, dragAndDropEnabled, reorder, readItems } = useSortableListContext();
+  // Both stop the drag registration and the keyboard path; only the consumer's
+  // `disabled` also stops the move buttons, which are the touch replacement.
+  const inert = disabled || !dragAndDropEnabled;
   // State rather than refs: registration has to wait until the consumer has
   // actually rendered its grip, and only a re-render tells us it did.
   const [item, setItem] = useState<HTMLElement | null>(null);
@@ -54,7 +66,7 @@ export function useSortableItem(): SortableItem {
   }, []);
 
   useEffect(() => {
-    if (!item || !handle || disabled) return undefined;
+    if (!item || !handle || inert) return undefined;
     return combine(
       // The drag has to start as a "move", or its first frame is drawn with the
       // copy cursor — see `drag-effect.ts`.
@@ -69,12 +81,12 @@ export function useSortableItem(): SortableItem {
         onDrop: () => setIsDragging(false),
       }),
     );
-  }, [item, handle, disabled, dragType]);
+  }, [item, handle, inert, dragType]);
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent<HTMLElement>) => {
       const step = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0;
-      if (!step || disabled) return;
+      if (!step || inert) return;
       const items = readItems();
       const from = items.indexOf(event.currentTarget.closest(`[${SORTABLE_ITEM_ATTRIBUTE}]`) as HTMLElement);
       const to = from + step;
@@ -85,8 +97,8 @@ export function useSortableItem(): SortableItem {
       // run of presses keeps moving the same item.
       requestAnimationFrame(() => handle?.focus());
     },
-    [disabled, readItems, reorder, handle],
+    [inert, readItems, reorder, handle],
   );
 
-  return { itemRef, dragHandleProps: { ref: setHandle, onKeyDown }, isDragging };
+  return { itemRef, dragHandleProps: { ref: setHandle, onKeyDown }, isDragging, dragAndDropEnabled };
 }

package/src/components/features/ticket-status-config-list/ticket-status-config-list.tsx

@@ -1,94 +1,87 @@
 'use client';
 
-import {
-  DndContext,
-  type DragEndEvent,
-  type DraggableAttributes,
-  type DraggableSyntheticListeners,
-  KeyboardSensor,
-  PointerSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { type CSSProperties, type ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { SortableList } from '../sortable-list/sortable-list';
+import { SortableMoveButtons } from '../sortable-list/sortable-move-buttons';
+import { type SortableDragHandleProps, useSortableItem } from '../sortable-list/use-sortable-item';
 
 export interface SortableRowRenderArgs {
-  dragHandleProps: DraggableSyntheticListeners;
-  dragHandleAttributes: DraggableAttributes;
+  /** Spread onto the grip whole — it carries the ref and the keyboard path. */
+  dragHandleProps: SortableDragHandleProps;
   isDragging: boolean;
+  /**
+   * The touch replacement for the grip: an up/down `SortableMoveButtons` pair,
+   * non-null exactly when drag is unavailable (touch/narrow viewports). Render
+   * it where the row's reorder control belongs — and no grip beside it.
+   */
+  moveButtons: ReactNode | null;
 }
 
 export interface TicketStatusConfigListProps<T extends { id: string }> {
   items: T[];
   onReorder: (oldIndex: number, newIndex: number) => void;
   renderRow: (item: T, args: SortableRowRenderArgs) => ReactNode;
+  /** Names a row for the live region and the move buttons, e.g. its status name. */
+  getItemLabel?: (index: number) => string | undefined;
   className?: string;
 }
 
+/**
+ * A reorderable list of config rows (ticket statuses, AI quick actions), built
+ * on {@link SortableList} — Pragmatic drag and drop on desktop, an explicit
+ * up/down pair on touch, where the HTML5 drag events never fire.
+ *
+ * `id` keys React rows only; the reorder itself is DOM-order based, so
+ * duplicates in `items` cannot collide.
+ */
 export function TicketStatusConfigList<T extends { id: string }>({
   items,
   onReorder,
   renderRow,
+  getItemLabel,
   className,
 }: TicketStatusConfigListProps<T>) {
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const oldIndex = items.findIndex(i => i.id === active.id);
-    const newIndex = items.findIndex(i => i.id === over.id);
-    if (oldIndex === -1 || newIndex === -1) return;
-    onReorder(oldIndex, newIndex);
-  };
-
-  const sortableIds = useMemo(() => items.map(i => i.id), [items]);
-
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-        <div className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}>
-          {items.map(item => (
-            <SortableRow key={item.id} id={item.id}>
-              {args => renderRow(item, args)}
-            </SortableRow>
-          ))}
-        </div>
-      </SortableContext>
-    </DndContext>
+    <SortableList
+      onReorder={onReorder}
+      getItemLabel={getItemLabel}
+      className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}
+    >
+      {items.map((item, index) => (
+        <SortableRow key={item.id} index={index} count={items.length} label={getItemLabel?.(index)}>
+          {args => renderRow(item, args)}
+        </SortableRow>
+      ))}
+    </SortableList>
   );
 }
 
-function SortableRow({ id, children }: { id: string; children: (args: SortableRowRenderArgs) => ReactNode }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
-
-  const style: CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    // Raise the actively dragged row above its siblings — without this the
-    // stacking follows DOM order, so a row dragged DOWN slides UNDER the rows
-    // below it while a row dragged up correctly renders on top.
-    zIndex: isDragging ? 1 : undefined,
-  };
+function SortableRow({
+  index,
+  count,
+  label,
+  children,
+}: {
+  index: number;
+  count: number;
+  label?: string;
+  children: (args: SortableRowRenderArgs) => ReactNode;
+}) {
+  const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
 
   return (
-    <div ref={setNodeRef} style={style}>
+    <div
+      ref={itemRef}
+      // Raise the actively dragged row above its siblings — without this the
+      // stacking follows DOM order, so a row dragged DOWN slides UNDER the rows
+      // below it while a row dragged up correctly renders on top.
+      className={isDragging ? 'relative z-10' : undefined}
+    >
       {children({
-        dragHandleProps: listeners,
-        dragHandleAttributes: attributes,
+        dragHandleProps,
         isDragging,
+        moveButtons: dragAndDropEnabled ? null : <SortableMoveButtons index={index} count={count} label={label} />,
       })}
     </div>
   );

package/src/components/ui/.ticket-status-config-row.md

@@ -1,14 +1,15 @@
-<!-- source-hash: af0402d9923c0e0c41315794a7eff4a9 -->
-A client-side React component that renders a single row in a ticket status configuration UI, supporting both system-defined and custom ticket statuses with drag-and-drop reordering, color picking, and delete controls.
+<!-- source-hash: manual -->
+A client-side React component that renders a single row in a ticket status configuration UI, supporting both system-defined and custom ticket statuses with reordering, color picking, and delete controls.
 
 ## Key Components
 
 ### `TicketStatusConfigRow`
 The primary exported component. Renders a row containing:
-- **Drag handle** — interactive for custom rows, decorative/disabled for system rows
-- **Name input** — editable for custom, read-only for system rows
-- **Color controls** — `ColorPresetSelect` and `ColorPickerInput` shown only for custom rows with color support
-- **Live preview** — `TicketStatusTag` reflecting current name and color
+- **Drag handle** — interactive for custom rows, decorative/disabled for system rows. The whole rail is rendered only while `useDragAndDropEnabled()` holds; on touch/narrow viewports it disappears and the `moveButtons` node (an up/down `SortableMoveButtons` pair handed in by `TicketStatusConfigList`) renders beside the delete button instead
+- **Name input** — editable for custom, read-only for system rows; carries a visible "Status Name" label (the rail, chip and controls offset below the label line to align with the field)
+- **Color controls** — `ColorPresetSelect` (labelled "Color") and `ColorPickerInput` shown only for custom rows with color support
+- **Live preview** — `TicketStatusTag` reflecting current name and color. Inline right on desktop (lg+); below the fields on tablet (own row, right-aligned) and mobile (beside the color select). System rows keep it beside the name everywhere
+- **Transparent background** — only the border outlines the row; the dragged row gets an opaque `bg-ods-bg` so it can travel over siblings
 - **Action button** — info tooltip icon for system rows; delete button (with optional disabled state tooltip) for custom rows
 
 ### `WithLeftTooltip` (internal)
@@ -22,7 +23,8 @@ The full props interface, key fields:
 | `variant` | `'system'` or `'custom'` — controls editability and available actions |
 | `statusKey` | Canonical key forwarded to `TicketStatusTag` |
 | `onColorChange` | Callback receiving `{ color, preset? }` |
-| `dragHandleProps` / `dragHandleAttributes` | From `@dnd-kit/core` for drag-and-drop |
+| `dragHandleProps` | `SortableDragHandleProps` from `useSortableItem` (spread whole onto the grip) |
+| `moveButtons` | Touch fallback node (`SortableRowRenderArgs.moveButtons`), rendered beside delete |
 | `deleteDisabledReason` | Shown as tooltip when delete is disabled |
 | `isDragging` | Applies visual feedback during drag |
 
@@ -46,9 +48,9 @@ import { TicketStatusConfigRow } from './ticket-status-config-row'
   onDelete={handleDelete}
   deleteDisabled={isOnlyStatus}
   deleteDisabledReason="At least one status is required"
-  dragHandleProps={listeners}
-  dragHandleAttributes={attributes}
+  dragHandleProps={dragHandleProps}
   isDragging={isDragging}
+  moveButtons={moveButtons}
 />
 
 // System row (read-only, no delete)

package/src/components/ui/input.tsx

@@ -14,6 +14,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   endAdornment?: ReactNode;
   /** Label text displayed above the input */
   label?: string;
+  /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles) */
+  labelVariant?: 'default' | 'large';
   /** Status message displayed below the input */
   error?: string;
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey).
@@ -37,6 +39,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       startAdornment,
       endAdornment,
       label,
+      labelVariant,
       error,
       errorVariant = 'error',
       loading = false,
@@ -75,7 +78,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         />
       );
       return label ? (
-        <FieldWrapper label={label} error={error} errorVariant={errorVariant}>
+        <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>
           {rangeInput}
         </FieldWrapper>
       ) : (
@@ -149,7 +152,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
 
     return (
-      <FieldWrapper label={label} error={error} errorVariant={errorVariant}>
+      <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorVariant={errorVariant}>
         {content}
       </FieldWrapper>
     );

package/src/components/ui/textarea.tsx

@@ -10,6 +10,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   invalid?: boolean;
   /** Label text displayed above the textarea */
   label?: string;
+  /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles) */
+  labelVariant?: 'default' | 'large';
   /** Error message displayed below the textarea */
   error?: string;
   /** Element rendered at the right edge of the field (e.g. send icon). */
@@ -41,6 +43,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       className,
       invalid = false,
       label,
+      labelVariant,
       error,
       endIcon,
       endIconAsButton = false,
@@ -66,7 +69,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     // border/bg/hover all live on the textarea itself.
     if (!hasAdornment) {
       return (
-        <FieldWrapper label={label} error={error}>
+        <FieldWrapper label={label} labelVariant={labelVariant} error={error}>
           <textarea
             className={cn(
               'flex min-h-[96px] w-full rounded-[6px] border p-3',
@@ -214,7 +217,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     );
 
     return (
-      <FieldWrapper label={label} error={error}>
+      <FieldWrapper label={label} labelVariant={labelVariant} error={error}>
         {content}
       </FieldWrapper>
     );

package/src/components/ui/ticket-status-config-row.tsx

@@ -1,13 +1,16 @@
 'use client';
 
-import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { type ReactNode, useId } from 'react';
+import { useDragAndDropEnabled } from '../../hooks/ui/use-drag-and-drop-enabled';
 import { cn } from '../../utils/cn';
+import type { SortableDragHandleProps } from '../features/sortable-list/use-sortable-item';
 import { DraggerIcon } from '../icons-v2-generated/interface/dragger-icon';
 import { TrashIcon } from '../icons-v2-generated/interface/trash-icon';
 import { InfoCircleIcon } from '../icons-v2-generated/signs-and-symbols/info-circle-icon';
 import { Button } from './button';
 import { ColorPresetSelect, ColorPickerInput } from './color-preset-select';
 import { Input } from './input';
+import { Label } from './label';
 import type { TagProps } from './tag';
 import { TicketStatusTag } from './ticket-status-tag';
 import { TouchFriendlyTooltip } from './touch-friendly-tooltip';
@@ -31,9 +34,14 @@ export interface TicketStatusConfigRowProps {
   onDelete?: () => void;
   deleteDisabled?: boolean;
   deleteDisabledReason?: string;
-  dragHandleProps?: DraggableSyntheticListeners;
-  dragHandleAttributes?: DraggableAttributes;
+  /** From `useSortableItem` (via `TicketStatusConfigList`'s render args). */
+  dragHandleProps?: SortableDragHandleProps;
   isDragging?: boolean;
+  /**
+   * The touch replacement for the drag handle (`SortableRowRenderArgs.moveButtons`).
+   * Rendered beside the delete button; the drag rail is hidden on touch anyway.
+   */
+  moveButtons?: ReactNode;
 }
 
 export function TicketStatusConfigRow({
@@ -50,9 +58,13 @@ export function TicketStatusConfigRow({
   deleteDisabled,
   deleteDisabledReason,
   dragHandleProps,
-  dragHandleAttributes,
   isDragging,
+  moveButtons,
 }: TicketStatusConfigRowProps) {
+  // Standalone system rows render outside any SortableList, so the row answers
+  // "is there a drag rail at all?" itself — same media gate the list uses.
+  const dragAndDropEnabled = useDragAndDropEnabled();
+  const nameInputId = useId();
   const isSystem = variant === 'system';
   const isCustomColor = !isSystem && presetKey === undefined;
   const previewColor = isSystem ? undefined : color;
@@ -60,101 +72,181 @@ export function TicketStatusConfigRow({
   // Custom rows render as filled pills (no border); system rows take the
   // page-configured variant (outline/primary). text-h5 already uppercases.
   const previewVariant: SystemTagVariant | undefined = systemTagVariant ?? (isSystem ? undefined : 'primary');
-  const colClass = 'min-w-0 grow basis-[calc(50%-6px)] md:basis-0';
+
+  // The fields carry a visible label, so everything that sits beside the
+  // 44/48px field row (rail, chip, controls) drops below the label line by
+  // exactly its height: the h4 line + the label's mb-1.
+  const fieldRowOffset = 'mt-[calc(var(--font-line-space-h4-body)+0.25rem)]';
+
+  const chip = (
+    <TicketStatusTag
+      status={statusKey}
+      label={name || ' '}
+      color={previewColor}
+      variant={previewVariant}
+      showIcon={isSystem}
+      className="max-w-full"
+    />
+  );
 
   return (
     <div
       className={cn(
-        'flex w-full items-start gap-3 rounded-md border border-ods-border bg-ods-card md:gap-[var(--spacing-system-m)]',
+        // Transparent background — only the border outlines the row.
+        'flex w-full items-start gap-3 rounded-md border border-ods-border md:gap-[var(--spacing-system-m)]',
         'p-[var(--spacing-system-m)]',
-        isDragging && 'opacity-70 shadow-lg',
+        // The dragged row travels over its siblings, so it needs an opaque back.
+        isDragging && 'bg-ods-bg opacity-70 shadow-lg',
       )}
     >
-      <div className="flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12">
-        {isSystem ? (
-          <DraggerIcon size={24} aria-hidden className="opacity-40" />
-        ) : (
-          <button
-            type="button"
-            aria-label="Drag to reorder"
-            className="flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing"
-            {...dragHandleAttributes}
-            {...dragHandleProps}
-          >
-            <DraggerIcon size={24} />
-          </button>
-        )}
-      </div>
+      {dragAndDropEnabled && (
+        <div
+          className={cn(
+            'flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12',
+            fieldRowOffset,
+          )}
+        >
+          {isSystem ? (
+            <DraggerIcon size={24} aria-hidden className="opacity-40" />
+          ) : (
+            <button
+              type="button"
+              aria-label="Drag to reorder"
+              className="flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing"
+              {...dragHandleProps}
+            >
+              <DraggerIcon size={24} />
+            </button>
+          )}
+        </div>
+      )}
 
-      <div className="flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-4 md:flex-nowrap md:gap-[var(--spacing-system-m)]">
-        <div className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', colClass)}>
+      {/* Every row spans the same equal column slots — two on tablet
+          (name + color for custom, name + chip for system), four on desktop
+          (name, color, a reserved slot, chip zone) with invisible spacers
+          standing in for the cells a row doesn't use — so the name field is one
+          width on every row and the columns align across the whole list.
+          The trailing controls are a WRAP ITEM (ordered per breakpoint), not a
+          full-height sibling column, so the lower rows span the full card width
+          and the chip pins to the card's right edge on tablet/mobile. */}
+      <div
+        className={cn(
+          'min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] md:gap-x-[var(--spacing-system-m)]',
+          isSystem
+            ? 'flex flex-wrap'
+            : // Mobile custom rows are a strict two-column grid, per the mock:
+              // fields (name / color / hex, all one width) on the left, the
+              // controls and the chip stacked in the right column. From md up
+              // the same children flow as a wrapping flex row.
+              'grid grid-cols-[minmax(0,1fr)_auto] md:flex md:flex-wrap',
+        )}
+      >
+        {/* System rows keep the chip beside the name on every width, so the name
+            shares its row. */}
+        <div className="order-1 flex min-w-0 grow basis-0 flex-col gap-[var(--spacing-system-xxs)]">
+          <Label variant="large" htmlFor={nameInputId}>
+            Status Name
+          </Label>
           <Input
+            id={nameInputId}
             value={name}
             onChange={e => onNameChange?.(e.target.value)}
             disabled={isSystem}
             readOnly={isSystem}
-            aria-label="Status name"
             maxLength={50}
           />
         </div>
 
         {showColorPicker ? (
-          <div className={cn('flex', colClass)}>
+          <div className="order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] md:order-2 md:basis-0">
+            <Label variant="large">Color</Label>
             <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
+            {/* Custom hex: a second field row inside the Color column, directly
+                under the select (per design). */}
+            {isCustomColor && (
+              <div className="mt-[var(--spacing-system-xxs)] flex min-w-0">
+                <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
+              </div>
+            )}
           </div>
         ) : (
-          <div aria-hidden className={cn('hidden md:block', colClass)} />
+          <div aria-hidden className="hidden min-w-0 grow basis-0 lg:order-2 lg:block" />
         )}
 
-        {showColorPicker && isCustomColor ? (
-          <div className={cn('flex', colClass)}>
-            <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
+        {/* Reserved desktop column slot (the mock's "No activity Indicator" zone). */}
+        <div aria-hidden className="hidden min-w-0 grow basis-0 lg:order-3 lg:block" />
+
+        {isSystem ? (
+          <div
+            className={cn(
+              'order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end md:h-12 lg:order-4',
+              fieldRowOffset,
+            )}
+          >
+            {chip}
           </div>
         ) : (
-          <div aria-hidden className={cn('hidden md:block', colClass)} />
+          <>
+            {/* Desktop (lg+): the chip rides the first row, in its own column
+                before the controls. */}
+            <div
+              className={cn(
+                'hidden h-12 min-w-0 grow basis-0 items-center justify-end lg:order-4 lg:flex',
+                fieldRowOffset,
+              )}
+            >
+              {chip}
+            </div>
+            {/* Tablet: the chip takes a full row of its own, pinned to the
+                card's right edge (the controls above no longer narrow it). */}
+            <div className="hidden min-w-0 basis-full items-center justify-end md:order-4 md:flex lg:hidden">
+              {chip}
+            </div>
+            {/* Mobile: the chip fills the second grid column beside the color
+                field, left-aligned with the controls above it. */}
+            <div className={cn('order-4 flex h-11 min-w-0 items-center md:hidden', fieldRowOffset)}>{chip}</div>
+          </>
         )}
 
-        <div className={cn('flex h-11 items-center justify-start md:h-12 md:justify-end', colClass)}>
-          <TicketStatusTag
-            status={statusKey}
-            label={name || ' '}
-            color={previewColor}
-            variant={previewVariant}
-            showIcon={isSystem}
-            className="max-w-full"
-          />
+        <div
+          className={cn(
+            'flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] md:h-12 lg:order-5',
+            isSystem ? 'order-3' : 'order-2 md:order-3',
+            fieldRowOffset,
+          )}
+        >
+          {!isSystem && moveButtons}
+          {isSystem ? (
+            <div className="flex w-11 justify-center md:w-12">
+              <TouchFriendlyTooltip content={systemTooltip}>
+                <button
+                  type="button"
+                  aria-label={systemTooltip ?? 'System status'}
+                  className="flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
+                >
+                  <InfoCircleIcon size={24} />
+                </button>
+              </TouchFriendlyTooltip>
+            </div>
+          ) : (
+            <TouchFriendlyTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
+              <span className="inline-flex">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  aria-label="Delete status"
+                  disabled={deleteDisabled}
+                  onClick={deleteDisabled ? undefined : onDelete}
+                  className={cn('size-11 md:size-12', deleteDisabled && 'pointer-events-none')}
+                >
+                  <TrashIcon className="text-ods-error" />
+                </Button>
+              </span>
+            </TouchFriendlyTooltip>
+          )}
         </div>
       </div>
-
-      <div className="flex h-11 w-12 shrink-0 items-center justify-center md:h-12">
-        {isSystem ? (
-          <TouchFriendlyTooltip content={systemTooltip}>
-            <button
-              type="button"
-              aria-label={systemTooltip ?? 'System status'}
-              className="flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
-            >
-              <InfoCircleIcon size={24} />
-            </button>
-          </TouchFriendlyTooltip>
-        ) : (
-          <TouchFriendlyTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
-            <span className="inline-flex">
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                aria-label="Delete status"
-                disabled={deleteDisabled}
-                onClick={deleteDisabled ? undefined : onDelete}
-                className={cn('size-11 md:size-12', deleteDisabled && 'pointer-events-none')}
-              >
-                <TrashIcon className="text-ods-error" />
-              </Button>
-            </span>
-          </TouchFriendlyTooltip>
-        )}
-      </div>
     </div>
   );
 }

package/src/hooks/ui/.index.md

@@ -8,6 +8,7 @@ Barrel export file for the UI hooks library, re-exporting all custom React hooks
 | `useAutoLimitTags` | Limits visible tags based on container width |
 | `useDebounce` | Delays value updates by a specified duration |
 | `useDeferredError` | Defers error state for async workflows |
+| `useDragAndDropEnabled` | Whether DnD is initialized at all — fine pointer + hover + 800px, else touch fallbacks |
 | `useFocusTrap` | Traps keyboard focus within a DOM subtree |
 | `useHeaderHeight` | Tracks the application header's pixel height |
 | `useHorizontalScrollbar` | Detects and manages horizontal scrollbar presence |