fix: center clicked suggestion in horizontal list

packages/elements/__tests__/suggestion.test.tsx

@@ -46,6 +46,24 @@ describe("suggestion", () => {
     expect(onClick).toHaveBeenCalledWith("Test suggestion");
   });
 
+  it("centers the clicked suggestion", async () => {
+    const scrollIntoView = vi
+      .spyOn(Element.prototype, "scrollIntoView")
+      .mockImplementation(vi.fn());
+    const user = userEvent.setup();
+
+    render(<Suggestion suggestion="Test suggestion" />);
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  });
+
   it("applies default variant and size", () => {
     render(<Suggestion suggestion="Test" />);
     const button = screen.getByRole("button");

packages/elements/src/suggestion.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import type { ComponentProps, MouseEvent } from "react";
+
 import { Button } from "@repo/shadcn-ui/components/ui/button";
 import {
   ScrollArea,
   ScrollBar,
 } from "@repo/shadcn-ui/components/ui/scroll-area";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { ComponentProps } from "react";
 import { useCallback } from "react";
 
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
@@ -38,9 +39,17 @@ export const Suggestion = ({
   children,
   ...props
 }: SuggestionProps) => {
-  const handleClick = useCallback(() => {
-    onClick?.(suggestion);
-  }, [onClick, suggestion]);
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.currentTarget.scrollIntoView?.({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+      onClick?.(suggestion);
+    },
+    [onClick, suggestion]
+  );
 
   return (
     <Button