Merge pull request #629 from aws-samples/fix-inline-code

コードブロックが生成された際に１行が長すぎると見切れてしまう

packages/web/src/components/ChatMessage.tsx

@@ -83,8 +83,8 @@ const ChatMessage: React.FC<Props> = (props) => {
       <div
         className={`${
           props.className ?? ''
-        } m-3 flex w-full flex-col justify-between md:w-11/12 lg:-ml-24 lg:w-4/6 lg:flex-row xl:w-3/6`}>
-        <div className="flex grow">
+        } flex w-full flex-col justify-between p-3 md:w-11/12 lg:w-5/6 xl:w-4/6 2xl:flex-row`}>
+        <div className="flex w-full">
           {chatContent?.role === 'user' && (
             <div className="bg-aws-sky h-min rounded p-2 text-xl text-white">
               <PiUserFill />
@@ -101,7 +101,7 @@ const ChatMessage: React.FC<Props> = (props) => {
             </div>
           )}
 
-          <div className="ml-5 grow ">
+          <div className="ml-5 w-full pr-14">
             {chatContent?.trace && (
               <details className="mb-2 cursor-pointer rounded border p-2">
                 <summary className="text-sm">
@@ -179,7 +179,7 @@ const ChatMessage: React.FC<Props> = (props) => {
           </div>
         </div>
 
-        <div className="flex items-start justify-end lg:-mr-24 print:hidden">
+        <div className="flex items-start justify-end print:hidden">
           {(chatContent?.role === 'user' || chatContent?.role === 'system') && (
             <div className="lg:w-8"></div>
           )}

packages/web/src/components/Markdown.tsx

@@ -69,9 +69,7 @@ const ImageRenderer = (props: any) => {
 const Markdown = React.memo(({ className, prefix, children }: Props) => {
   return (
     <ReactMarkdown
-      className={`${
-        className ?? ''
-      } prose prose-code:w-1/5 max-w-full break-all`}
+      className={`${className ?? ''} prose max-w-full`}
       children={children}
       remarkPlugins={[remarkGfm, remarkBreaks]}
       remarkRehypeOptions={{ clobberPrefix: prefix }}