From 6e1f137048fe59c36b435329260049a09f21e5e3 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Fri, 24 Mar 2023 18:01:37 +0800
Subject: [PATCH] chore: update empty view style

---
 components/ChatView/index.tsx | 2 +-
 components/EmptyView.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/ChatView/index.tsx b/components/ChatView/index.tsx
index 93535b2..83cb0db 100644
--- a/components/ChatView/index.tsx
+++ b/components/ChatView/index.tsx
@@ -117,7 +117,7 @@ const ChatView = () => {
       <Header />
       <div className="p-2 w-full h-auto grow max-w-3xl py-1 px-4 sm:px-8 mx-auto">
         {messageList.length === 0 ? (
-          <EmptyView className="-mt-12" />
+          <EmptyView className="mt-16" />
         ) : (
           messageList.map((message) => <MessageView key={message.id} message={message} />)
         )}
diff --git a/components/EmptyView.tsx b/components/EmptyView.tsx
index 0d78f43..78ed9da 100644
--- a/components/EmptyView.tsx
+++ b/components/EmptyView.tsx
@@ -8,9 +8,9 @@ const EmptyView = (props: Props) => {
   const { className } = props;
 
   return (
-    <div className={`${className || ""} w-full h-full flex flex-col justify-center items-center`}>
+    <div className={`${className || ""} w-full h-full flex flex-col justify-start items-center`}>
       <p className=" text-5xl font-medium leading-loose mb-8">SQLChat</p>
-      <div className="w-full grid grid-cols-3 gap-4">
+      <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
         <div className="w-full flex flex-col justify-start items-center">
           <Icon.Bs.BsSun className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Examples</span>
@@ -23,7 +23,7 @@ const EmptyView = (props: Props) => {
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Remembers what user said earlier in the conversation</div>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">Allows user to provide follow-up corrections</div>
         </div>
-        <div className="w-full flex flex-col justify-start items-center">
+        <div className="w-full hidden sm:flex flex-col justify-start items-center">
           <Icon.Bs.BsEmojiNeutral className="w-8 h-auto opacity-80" />
           <span className="mt-2 mb-4">Limitations</span>
           <div className="w-full bg-gray-50 rounded-lg px-4 py-3 text-sm mb-4">May occasionally generate incorrect information</div>