From e30d1cce7608bbfb45e9c24c0aa2da3fe7bcf7b6 Mon Sep 17 00:00:00 2001
From: Luis Llanes <luisllaboj@gmail.com>
Date: Mon, 19 May 2025 17:40:44 -0700
Subject: [PATCH] chore: achieve a cleaner look, set a max-height and a
 scrollbar and adjust loading skeletons

---
 app/ai/components/ai-chat-form.tsx                    |  7 +++++--
 app/globals.css                                       | 11 ++++++++++-
 .../action-bar/components/ai-generate-dialog.tsx      |  2 +-
 components/editor/custom-textarea.tsx                 |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/ai/components/ai-chat-form.tsx b/app/ai/components/ai-chat-form.tsx
index 8a254c92..60d62769 100644
--- a/app/ai/components/ai-chat-form.tsx
+++ b/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>
diff --git a/app/globals.css b/app/globals.css
index 3cf87c5c..18cf97ef 100644
--- a/app/globals.css
+++ b/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;
+  }
+}
diff --git a/components/editor/action-bar/components/ai-generate-dialog.tsx b/components/editor/action-bar/components/ai-generate-dialog.tsx
index a5374a52..ecb48db3 100644
--- a/components/editor/action-bar/components/ai-generate-dialog.tsx
+++ b/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}
diff --git a/components/editor/custom-textarea.tsx b/components/editor/custom-textarea.tsx
index 9a81cd84..f6d0cb29 100644
--- a/components/editor/custom-textarea.tsx
+++ b/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) {