fix(sender): fix max height and optimize scrollbar (#73)

<img width="1144" height="345" alt="image"
src="https://github.com/user-attachments/assets/8c86c7f5-9948-4de6-9ad9-aef2d37b3d4e"
/>
<img width="1130" height="376" alt="image"
src="https://github.com/user-attachments/assets/49647db4-2db5-4249-a89e-fc9cd70d95dc"
/>

After 4 rows, appearing overflow-y-auto. I set the max-h-32 , which
could be modified. But the overflow-y-auto looks ugly, and idk how to
modify.

Author: xx-yoke

.changes/fix-sender-overflow.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:fix
+---
+
+Fix max height of sender and optimize scrollbar style.

playground/src/Chat.tsx

@@ -11,6 +11,7 @@ import { InputCount, Sender } from "@matechat/react/sender";
 import type { MessageParam } from "@matechat/react/utils";
 import { useChat } from "@matechat/react/utils/chat";
 import { useMateChat } from "@matechat/react/utils/core";
+import clsx from "clsx";
 import { MessageSquarePlus } from "lucide-react";
 import { useMemo, useState } from "react";
 
@@ -84,7 +85,13 @@ export function Chat() {
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
       <main className="flex flex-col items-center justify-center h-[80vh] w-full max-w-3xl p-4 bg-white rounded-lg shadow-md gap-5">
         <BubbleList
-          className="px-4 w-full max-w-full"
+          className={clsx(
+            "px-4 w-full max-w-full",
+            "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full",
+            "[&::-webkit-scrollbar-thumb]:cursor-auto",
+            "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+            "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          )}
           messages={messages}
           background="right-solid"
           isPending={pending}

src/sender.tsx

@@ -180,7 +180,9 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "flex flex-col items-center border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm transition-all duration-300 hover:shadow-md focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+          "px-1 flex flex-col items-center border rounded-2xl",
+          "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
+          "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
         ),
       )}
@@ -192,7 +194,16 @@ export function Sender({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        className="w-full pt-4 px-4 border-0 rounded-2xl !resize-none focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400"
+        className={clsx(
+          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
+          "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
+          "overflow-y-auto max-h-32",
+          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
+          "[&::-webkit-scrollbar-thumb]:cursor-auto",
+          "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+          "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          "[&::-webkit-scrollbar-track]:mt-3",
+        )}
         rows={2}
       />
       <div className="flex items-center w-full px-4 py-2 gap-4">