feat(artifact): apply horizontal scroll on character list

app/(ui)/artifact/client.tsx

@@ -19,6 +19,7 @@ import GuideImage2 from "#/guide/2.png";
 import Avatar from "@/components/avatar";
 import { Blocker } from "@/components/blocker";
 import { ComboBox } from "@/components/combobox";
+import { HorizontalDiv } from "@/components/horizontal";
 import { SimpleTooltip } from "@/components/tooltip";
 import {
   AlertDialog,
@@ -30,7 +31,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ScrollBar } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
 import { getCharacters } from "@/lib/api";
 import { IccContext, shared } from "@/lib/comms";
@@ -150,7 +151,7 @@ export function CharacterChooser({
           className="w-full bg-transparent! hover:bg-accent!"
         />
       ) : (
-        <ScrollArea>
+        <HorizontalDiv magnitude={2}>
           {isError ? (
             <Placeholder className="flex-col">
               <div className="flex gap-2">
@@ -213,7 +214,7 @@ export function CharacterChooser({
             type="hidden"
             value={selected}
           />
-        </ScrollArea>
+        </HorizontalDiv>
       )}
     </>
   );

components/horizontal.tsx

@@ -3,9 +3,12 @@
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { type ComponentProps, useRef } from "react";
 
-export function HorizontalDiv(
-  props: ComponentProps<typeof ScrollAreaPrimitive.Viewport>,
-) {
+export function HorizontalDiv({
+  magnitude = 4,
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.Viewport> & {
+  magnitude?: number;
+}) {
   const ref = useRef<HTMLDivElement | null>(null);
   return (
     <ScrollAreaPrimitive.Root data-slot="scroll-area" className="relative">
@@ -15,7 +18,7 @@ export function HorizontalDiv(
         onWheel={(ev) => {
           if (ref.current)
             ref.current.scrollTo({
-              left: ref.current.scrollLeft + ev.deltaY * 4,
+              left: ref.current.scrollLeft + ev.deltaY * magnitude,
               behavior: "smooth",
             });
         }}