From 1ff3160eac98d140235baaff422e637236601671 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Wed, 29 Apr 2026 14:24:43 +0200
Subject: [PATCH] feat(mobile): add ActionRow with horizontal-scroll-snap on
 mobile, wrap on desktop

---
 src/components/shared/action-row.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/shared/action-row.tsx

diff --git a/src/components/shared/action-row.tsx b/src/components/shared/action-row.tsx
new file mode 100644
index 0000000..c250362
--- /dev/null
+++ b/src/components/shared/action-row.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * Chip-row action group used on detail-page headers. On mobile (`< sm`), the
+ * row scrolls horizontally with snap-x, no overflow clipping. On desktop, it
+ * wraps freely.
+ */
+export function ActionRow({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn(
+        'flex gap-2',
+        'overflow-x-auto snap-x snap-mandatory scroll-smooth -mx-3 px-3 sm:mx-0 sm:px-0',
+        'sm:flex-wrap sm:overflow-visible',
+        '[&>*]:snap-start [&>*]:shrink-0 sm:[&>*]:snap-none',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}