feat(mobile): add ActionRow with horizontal-scroll-snap on mobile, wrap on desktop

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>
+  );
+}