chore: achieve a cleaner look, set a max-height and a scrollbar and adjust loading skeletons

app/ai/components/ai-chat-form.tsx

@@ -17,7 +17,7 @@ import ThemePresetSelect from "./temp-theme-preset-select";
 
 const CustomTextarea = dynamic(() => import("@/components/editor/custom-textarea"), {
   ssr: false,
-  loading: () => <Loading className="min-h-[80px] w-full rounded-lg" />,
+  loading: () => <Loading className="min-h-[60px] w-full rounded-lg" />,
 });
 
 export function AIChatForm() {
@@ -72,7 +72,10 @@ export function AIChatForm() {
       <div className="bg-background relative z-10 flex size-full min-h-[100px] flex-1 flex-col overflow-hidden rounded-xl">
         <label className="sr-only">Chat Input</label>
         <div className={cn("min-h-[80px] p-2 pb-0", aiGenerateLoading && "pointer-events-none")}>
-          <div className="relative isolate" aria-disabled={aiGenerateLoading}>
+          <div
+            className="bg-muted/40 relative isolate rounded-lg"
+            aria-disabled={aiGenerateLoading}
+          >
             <AIChatFormGeneratingFallback aiGenerateLoading={aiGenerateLoading} />
             <CustomTextarea onContentChange={handleContentChange} onGenerate={handleGenerate} />
           </div>

app/globals.css

@@ -117,7 +117,7 @@ body {
 
 /* Mention styles */
 .mention {
-  @apply bg-primary/10 text-primary px-1 rounded-md;
+  @apply bg-primary/10 text-primary rounded-md px-1;
 }
 
 @keyframes text {
@@ -132,3 +132,12 @@ body {
 .animate-text {
   animation: text 3s linear infinite;
 }
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+}

components/editor/action-bar/components/ai-generate-dialog.tsx

@@ -59,7 +59,7 @@ export function AIGenerateDialog({
 
         <div className="px-6">
           <div className="bg-muted/40 rounded-lg p-1 max-w-[500px]">
-            <Suspense fallback={<Loading className="min-h-[80px]" />}>
+            <Suspense fallback={<Loading className="min-h-[60px]" />}>
               <CustomTextarea
                 onContentChange={handleContentChange}
                 onGenerate={handleGenerate}

components/editor/custom-textarea.tsx

@@ -35,7 +35,7 @@ const CustomTextarea: React.FC<CustomTextareaProps> = ({ onContentChange, onGene
     editorProps: {
       attributes: {
         class:
-          "min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50",
+          "min-h-[60px] max-h-[150px] wrap-anywhere text-foreground/90 scrollbar-thin overflow-y-auto w-full rounded-md bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:opacity-50",
       },
       handleKeyDown: (view, event) => {
         if (event.key === "Enter" && !event.shiftKey) {