[FIX] wider convo UI in larger displays

jorge-menjivar · Nov 16, 2023 · 368db51 · 368db51 · vercel · Nov 16, 2023
1 parent fe02975
commit 368db51
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/components/Home/components/ChatZone/Screens/Chat/ChatInput.tsx b/components/Home/components/ChatZone/Screens/Chat/ChatInput.tsx
@@ -270,7 +270,7 @@ export const ChatInput = ({
     >
       <div
         className="relative flex flex-col mb-2 mt-4 last:mb-2 md:mx-4 md:mt-[52px]
-      md:last:mb-6 lg:mx-auto lg:max-w-3xl"
+      md:last:mb-6 lg:mx-auto md:max-w-2xl md:py-6 lg:max-w-full lg:px-0 2xl:max-w-5xl 3xl:max-w-6xl 4xl:max-w-7xl 5xl:max-w-[1920px] justify-center"
       >
         <div className="flex flex-row justify-center items-center">
           {messageIsStreaming && (

diff --git a/components/Home/components/ChatZone/Screens/Chat/ChatMessage.tsx b/components/Home/components/ChatZone/Screens/Chat/ChatMessage.tsx
@@ -158,13 +158,13 @@ export const ChatMessage: FC<Props> = memo(
         }`}
         style={{ overflowWrap: 'anywhere' }}
       >
-        <div className="group 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="group relative m-auto flex p-4 text-base md:max-w-2xl md:py-6 lg:max-w-full lg:px-0 2xl:max-w-5xl 3xl:max-w-6xl 4xl:max-w-7xl 5xl:max-w-[1920px] justify-center">
           <div className="min-w-[40px] text-right font-bold">
             {message.role === 'assistant' && <IconRobot size={30} />}
             {message.role === 'user' && <IconUser size={30} />}
           </div>
 
-          <div className="prose mt-[-2px] w-full dark:prose-invert">
+          <div className="prose mt-[-2px] w-full max-w-none dark:prose-invert prose-slate">
             {message.role === 'user' && (
               <div className="flex w-full">
                 {isEditing ? (
@@ -207,7 +207,7 @@ export const ChatMessage: FC<Props> = memo(
                     </div>
                   </div>
                 ) : (
-                  <div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
+                  <div className="whitespace-pre-wrap flex-1">
                     {message.content}
                   </div>
                 )}
@@ -233,7 +233,7 @@ export const ChatMessage: FC<Props> = memo(
             {message.role === 'assistant' && (
               <div className="flex flex-row">
                 <MemoizedReactMarkdown
-                  className="prose dark:prose-invert flex-1"
+                  className="flex-1"
                   remarkPlugins={[remarkGfm, remarkMath]}
                   // @ts-ignore
                   rehypePlugins={[rehypeRaw, rehypeKatex]}

diff --git a/components/Markdown/CodeBlock.tsx b/components/Markdown/CodeBlock.tsx
@@ -60,22 +60,22 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
     URL.revokeObjectURL(url);
   };
   return (
-    <div className="codeblock relative font-sans text-[16px]">
-      <div className="flex items-center justify-between py-1.5 px-4">
-        <span className="text-xs lowercase text-black dark:text-white">
+    <div className="codeblock relative font-sans text-base w-full overflow-hidden">
+      <div className="flex items-center justify-between py-1.5 px-4 overflow-hidden">
+        <span className="text-xs font-semibold lowercase text-white dark:text-white">
           {language}
         </span>
 
         <div className="flex items-center">
           <button
-            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-black dark:text-white"
+            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs font-light text-white dark:text-white"
             onClick={copyToClipboard}
           >
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? t('Copied!') : t('Copy code')}
           </button>
           <button
-            className="flex items-center rounded bg-none p-1 text-xs text-black dark:text-white"
+            className="flex items-center rounded bg-none p-1 text-xs text-white dark:text-white"
             onClick={downloadAsFile}
           >
             <IconDownload size={18} />
@@ -86,7 +86,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       <SyntaxHighlighter
         language={language}
         style={oneDark}
-        customStyle={{ margin: 0 }}
+        customStyle={{ margin: 0, fontSize: '15px' }}
       >
         {value}
       </SyntaxHighlighter>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -110,6 +110,17 @@ module.exports = {
           'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
       },
     },
+    screens: {
+      '2xs': '380px',
+      xs: '480px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      '2xl': '1280px',
+      '3xl': '1440px',
+      '4xl': '1920px',
+      '5xl': '2560px',
+    },
   },
   variants: {
     extend: {