From fad67499e720d1ad9c9d07ee197744b59777b38c Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Sat, 18 Mar 2023 04:29:39 -0600
Subject: [PATCH] mobile improvements

---
 components/Chat/Chat.tsx        | 2 +-
 components/Chat/ChatInput.tsx   | 2 +-
 components/Chat/ChatMessage.tsx | 8 ++++----
 pages/index.tsx                 | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 317f6d0..d8d6fe2 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -57,7 +57,7 @@ export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, o
         )}
       </div>
 
-      <div className="h-[140px] w-[300px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto">
+      <div className="h-[80px] sm:h-[140px] w-[340px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto">
         <ChatInput onSend={onSend} />
       </div>
     </div>
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 234b62e..4cfd168 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -47,7 +47,7 @@ export const ChatInput: FC<Props> = ({ onSend }) => {
 
   return (
     <div className="relative">
-      <div className="absolute bottom-[-120px] w-full">
+      <div className="absolute bottom-[-70px] sm:bottom-[-120px] w-full">
         <textarea
           ref={textareaRef}
           className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900"
diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index 77ba3b7..1789e91 100644
--- a/components/Chat/ChatMessage.tsx
+++ b/components/Chat/ChatMessage.tsx
@@ -11,13 +11,13 @@ interface Props {
 export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
   return (
     <div
-      className={`flex justify-center py-[30px] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
+      className={`flex justify-center py-[20px] sm:py-[30px] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
       style={{ overflowWrap: "anywhere" }}
     >
-      <div className="w-full px-4 sm:px-0 sm:w-2/3 md:w-1/2 flex">
-        <div className="mr-4 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
+      <div className="w-full sm:w-2/3 md:w-1/2 flex px-4">
+        <div className="mr-1 sm:mr-2 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
 
-        <div className="prose dark:prose-invert">
+        <div className="prose dark:prose-invert mt-[-2px]">
           <ReactMarkdown
             components={{
               code({ node, inline, className, children, ...props }) {
diff --git a/pages/index.tsx b/pages/index.tsx
index 2adad71..d22eb09 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -245,7 +245,7 @@ export default function Home() {
             />
           ) : (
             <IconArrowBarRight
-              className="absolute top-4 left-4 text-black dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300"
+              className="absolute top-2 left-4 text-black dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300"
               onClick={() => setShowSidebar(!showSidebar)}
             />
           )}