styling: make code block scrollable instead of wrapping code

Author: Drew

frontends/chat/src/components/Atoms/AfMessage.tsx

@@ -165,6 +165,7 @@ export const AfMessage = (props: AfMessageProps) => {
         orientation={screenWidth() > 768 ? "horizontal" : "vertical"}
         sizes={sizes()}
         onSizesChange={(sizes) => setSizes(sizes)}
+        class="max-w-full"
         classList={{
           "self-start": props.role == "assistant",
           "self-end": props.role == "user",
@@ -174,7 +175,7 @@ export const AfMessage = (props: AfMessageProps) => {
           minSize={0.1}
           ref={setLeftColumnRef}
           classList={{
-            "dark:text-white self-start group grow shadow-sm w-full h-full rounded border dark:border-neutral-700 md:px-6 px-4 py-4 flex items-start":
+            "dark:text-white self-start group grow shadow-sm max-w-full overflow-hidden h-full rounded border dark:border-neutral-700 md:px-6 px-4 py-4 flex items-start":
               true,
             "bg-neutral-200 border-neutral-300 dark:bg-neutral-700/70":
               props.role === "assistant",
@@ -183,7 +184,7 @@ export const AfMessage = (props: AfMessageProps) => {
             "md:mr-16": props.role === "assistant" && metadata().length <= 0,
           }}
         >
-          <div class="flex w-full items-center gap-4 self-start text-black dark:text-neutral-100 md:flex-row">
+          <div class="flex w-full items-center gap-4 self-start text-wrap text-black dark:text-neutral-100 md:flex-row">
             <div class="mt-1 self-start">
               {props.role === "user" ? (
                 <BiSolidUserRectangle class="fill-current" />
@@ -194,7 +195,7 @@ export const AfMessage = (props: AfMessageProps) => {
             <div
               classList={{
                 "w-full": true,
-                "flex gap-y-8 items-start lg:gap-4 flex-col-reverse lg:flex-row":
+                "flex overflow-hidden gap-y-8 items-start lg:gap-4 flex-col-reverse lg:flex-row":
                   !!chunkMetadatas(),
               }}
             >
@@ -245,7 +246,7 @@ export const AfMessage = (props: AfMessageProps) => {
                 <SolidMarkdown
                   remarkPlugins={[remarkBreaks, remarkGfm]}
                   rehypePlugins={[rehypeSanitize]}
-                  class="w-full select-text space-y-2"
+                  class="w-full max-w-[full] select-text space-y-2 overflow-hidden"
                   components={{
                     h1: (props) => {
                       return (
@@ -305,7 +306,7 @@ export const AfMessage = (props: AfMessageProps) => {
                       });
 
                       return (
-                        <div class="relative w-full text-wrap rounded-lg bg-gray-100 px-4 py-2 dark:bg-neutral-700">
+                        <div class="relative w-full rounded-lg bg-gray-100 px-4 py-2 dark:bg-neutral-700">
                           <button
                             class="absolute right-2 top-2 p-1 text-xs hover:text-fuchsia-500 dark:text-white dark:hover:text-fuchsia-500"
                             onClick={() => {
@@ -331,7 +332,9 @@ export const AfMessage = (props: AfMessageProps) => {
                             </Switch>
                           </button>
 
-                          <code ref={setCodeBlock}>{props.children}</code>
+                          <div class="overflow-x-auto">
+                            <code ref={setCodeBlock}>{props.children}</code>
+                          </div>
                         </div>
                       );
                     },

frontends/chat/src/components/Layouts/MainLayout.tsx

@@ -290,7 +290,7 @@ const MainLayout = (props: LayoutProps) => {
     <>
       <div class="relative flex w-full flex-col justify-between">
         <div
-          class="flex flex-col items-stretch gap-6 px-4 pb-32 pt-4"
+          class="flex max-w-full flex-col items-stretch gap-6 overflow-hidden px-4 pb-32 pt-4"
           id="topic-messages"
         >
           <For each={messages()}>