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

@@ -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>

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>