From dcb2810d4692d14d7995672f42f7673d4e0abb66 Mon Sep 17 00:00:00 2001
From: Shemar Lindie <shemarlindie@gmail.com>
Date: Wed, 19 Apr 2023 10:34:27 -0400
Subject: [PATCH] fix: optimize mobile layout (#606)

- conserve space in new convo view
- fix overlapping edit and delete chat message icons
- fix overlapping copy icon
---
 components/Chat/Chat.tsx        |  2 +-
 components/Chat/ChatMessage.tsx | 70 +++++++++++++--------------------
 2 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 5d1148c..815bde1 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -398,7 +398,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
           >
             {selectedConversation?.messages.length === 0 ? (
               <>
-                <div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
+                <div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
                   <div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
                     {models.length === 0 ? (
                       <div>
diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index 9c2cdb9..aa0f488 100644
--- a/components/Chat/ChatMessage.tsx
+++ b/components/Chat/ChatMessage.tsx
@@ -126,14 +126,14 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
 
   return (
     <div
-      className={`group px-4 ${
+      className={`group md:px-4 ${
         message.role === 'assistant'
           ? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
           : 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
       }`}
       style={{ overflowWrap: 'anywhere' }}
     >
-      <div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+      <div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
         <div className="min-w-[40px] text-right font-bold">
           {message.role === 'assistant' ? (
             <IconRobot size={30} />
@@ -185,64 +185,32 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
                   </div>
                 </div>
               ) : (
-                <div className="prose whitespace-pre-wrap dark:prose-invert">
+                <div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
                   {message.content}
                 </div>
               )}
 
-              {(window.innerWidth < 640 || !isEditing) && (
-                <>
+              {!isEditing && (
+                <div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
                   <button
-                    className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
-                      window.innerWidth < 640
-                        ? 'bottom-1 right-3'
-                        : 'right-6 top-[26px]'
-                    }
-                      `}
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                     onClick={toggleEditing}
                   >
                     <IconEdit size={20} />
                   </button>
                   <button
-                    className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
-                      window.innerWidth < 640
-                        ? 'bottom-1 right-3'
-                        : 'right-0 top-[26px]'
-                    }
-                      `}
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                     onClick={handleDeleteMessage}
                   >
                     <IconTrash size={20} />
                   </button>
-                </>
+                </div>
               )}
             </div>
           ) : (
-            <>
-              <div
-                className={`absolute ${
-                  window.innerWidth < 640
-                    ? 'bottom-1 right-3'
-                    : 'right-0 top-[26px] m-0'
-                }`}
-              >
-                {messagedCopied ? (
-                  <IconCheck
-                    size={20}
-                    className="text-green-500 dark:text-green-400"
-                  />
-                ) : (
-                  <button
-                    className="translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300"
-                    onClick={copyOnClick}
-                  >
-                    <IconCopy size={20} />
-                  </button>
-                )}
-              </div>
-
+            <div className="flex flex-row">
               <MemoizedReactMarkdown
-                className="prose dark:prose-invert"
+                className="prose dark:prose-invert flex-1"
                 remarkPlugins={[remarkGfm, remarkMath]}
                 rehypePlugins={[rehypeMathjax]}
                 components={{
@@ -287,7 +255,23 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
               >
                 {message.content}
               </MemoizedReactMarkdown>
-            </>
+
+              <div className="md:-mr-8 ml-1 md:ml-0 flex flex-col md:flex-row gap-4 md:gap-1 items-center md:items-start justify-end md:justify-start">
+                {messagedCopied ? (
+                  <IconCheck
+                    size={20}
+                    className="text-green-500 dark:text-green-400"
+                  />
+                ) : (
+                  <button
+                    className="invisible group-hover:visible focus:visible text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                    onClick={copyOnClick}
+                  >
+                    <IconCopy size={20} />
+                  </button>
+                )}
+              </div>
+            </div>
           )}
         </div>
       </div>