From 13380b334629eaf4f8a93d78a1b44fb7c9af6152 Mon Sep 17 00:00:00 2001
From: Suresh Chaudhary <hello@suresh.im>
Date: Sun, 5 Jan 2025 18:34:47 +0530
Subject: [PATCH] fix styling in loading states

---
 app/page.tsx                     | 6 +++---
 components/ui/form-component.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a4cf001..fcee74b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2481,8 +2481,8 @@ Grok 2 models are now available for you to try out.
                 <div className="relative mt-4 px-0">
                     {/* Overlay with Loading Text */}
                     <div className="absolute inset-0 z-10 flex items-center justify-center">
-                        <div className="backdrop-blur-sm bg-white/30 dark:bg-black/30 rounded-2xl px-6 py-3 shadow-lg">
-                            <div className="flex items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300">
+                        <div className="backdrop-blur-sm bg-white/30 dark:bg-black/30 rounded-xl px-4 h-full py-3 shadow-lg">
+                            <div className="flex items-center gap-2 text-sm font-medium text-neutral-600 h-full dark:text-neutral-300">
                                 <Loader2 className="w-4 h-4 animate-spin" />
                                 <span>Loading trending queries</span>
                             </div>
@@ -2490,7 +2490,7 @@ Grok 2 models are now available for you to try out.
                     </div>
 
                     {/* Background Cards */}
-                    <div className="flex gap-2">
+                    <div className="flex justify-between">
                         {[1, 2, 3].map((_, index) => (
                             <div
                                 key={index}
diff --git a/components/ui/form-component.tsx b/components/ui/form-component.tsx
index 9411309..484df0a 100644
--- a/components/ui/form-component.tsx
+++ b/components/ui/form-component.tsx
@@ -770,7 +770,7 @@ const FormComponent: React.FC<FormComponentProps> = ({
                 </div>
             )}
 
-            <div className="relative">
+            <div className="relative rounded-lg bg-neutral-100 dark:bg-neutral-900">
                 <Textarea
                     ref={inputRef}
                     placeholder={hasSubmitted ? "Ask a new question..." : "Ask a question..."}