Merge pull request #191 from AGiXT/Fix-side-scrolling-in-chat

Fix side scrolling in chat

Author: Josh-XT

app/globals.css

@@ -159,6 +159,13 @@ img[src=""],img[src="#"] {
 .katex-display {
   @apply my-4 overflow-x-auto;
   max-width: 100%;
+  box-sizing: border-box;
+}
+
+.katex {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .dark .katex {
@@ -168,3 +175,38 @@ img[src=""],img[src="#"] {
 .dark .katex-html {
   color: var(--foreground);
 }
+
+/* Prevent horizontal overflow for all content */
+.code-container, 
+.data-table,
+.markdown-content,
+pre,
+code {
+  max-width: 100%;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Ensure tables are responsive */
+table {
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+  white-space: nowrap;
+}
+
+/* For very long words or URLs */
+.message-content {
+  word-break: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Prevent pre elements from causing overflow */
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+  max-width: 100%;
+}

components/conversation/Message/Markdown/CodeBlock.tsx

@@ -205,7 +205,7 @@ export default function CodeBlock({
     <Collapsible
       open={isOpen}
       onOpenChange={setIsOpen}
-      className={`my-2 overflow-hidden border rounded-lg bg-card transition-all duration-300 ease-in-out ${isOpen ? 'w-full' : 'inline-block'}`}
+      className={`my-2 overflow-hidden border rounded-lg bg-card transition-all duration-300 ease-in-out max-w-full ${isOpen ? 'w-full' : 'inline-block'}`}
     >
       <div className='relative flex items-center justify-between pr-4 border-b-2 border-border'>
         <CollapsibleTrigger className='p-2 hover:bg-muted'>
@@ -248,7 +248,7 @@ export default function CodeBlock({
         )}
 
         <TabPanel value={tab} index={hasCustomRenderer ? 1 : 0}>
-          <div className='code-container bg-card p-4' ref={codeBlockRef}>
+          <div className='code-container bg-card p-4 overflow-x-auto max-w-full' ref={codeBlockRef}>
             {languageKey in fileExtensions ? (
               <SyntaxHighlighter
                 {...props}

components/conversation/Message/MarkdownBlock.tsx

@@ -65,7 +65,7 @@ export default function MarkdownBlock({ content, chatItem, setLoading }: Markdow
   }
   try {
     return (
-      <>
+      <div className='message-content'>
         {textToMarkdown(content.toString()).map((segment, index) => {
           if (segment.type === undefined) {
             return (
@@ -110,7 +110,7 @@ export default function MarkdownBlock({ content, chatItem, setLoading }: Markdow
                   table() {
                     const { columns, rows } = parseMarkdownTable(segment.content);
                     return (
-                      <div className='w-full'>
+                      <div className='w-full overflow-x-auto'>
                         <DataTable columns={createColumns(columns)} data={rows} />
                       </div>
                     );
@@ -144,7 +144,7 @@ export default function MarkdownBlock({ content, chatItem, setLoading }: Markdow
             );
           }
         })}
-      </>
+      </div>
     );
   } catch (e) {
     console.error(e);

components/conversation/Message/Message.tsx

@@ -93,7 +93,12 @@ export default function Message({ chatItem, lastUserMessage, setLoading }: Messa
   const isUserMsgJustText = checkUserMsgJustText(chatItem);
 
   return (
-    <div className={cn('m-3 overflow-hidden flex flex-col gap-2 min-w-48', isUserMsgJustText && 'max-w-[60%] self-end')}>
+    <div
+      className={cn(
+        'm-3 overflow-hidden flex flex-col gap-2 min-w-0 max-w-full',
+        isUserMsgJustText && 'max-w-[60%] self-end',
+      )}
+    >
       {audios && audios.sources.length > 0 ? (
         <>
           {audios.message?.trim() && (
@@ -111,8 +116,8 @@ export default function Message({ chatItem, lastUserMessage, setLoading }: Messa
         <div
           className={
             chatItem.role === 'USER'
-              ? 'chat-log-message-user bg-primary rounded-3xl py-1 rounded-br-none px-5 text-primary-foreground'
-              : 'chat-log-message-ai p-0 pt-2 text-foreground'
+              ? 'chat-log-message-user bg-primary rounded-3xl py-1 rounded-br-none px-5 text-primary-foreground overflow-hidden'
+              : 'chat-log-message-ai p-0 pt-2 text-foreground overflow-hidden'
           }
         >
           <MarkdownBlock content={formattedMessage} chatItem={chatItem} setLoading={setLoading} />

components/conversation/Message/data-table/index.tsx

@@ -54,10 +54,10 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
   });
 
   return (
-    <div className='w-full p-2 space-y-2 rounded-md bg-background text-foreground'>
+    <div className='w-full p-2 space-y-2 rounded-md bg-background text-foreground max-w-full'>
       <DataTableToolbar table={table} />
-      <div className='border rounded-md'>
-        <Table>
+      <div className='border rounded-md overflow-x-auto'>
+        <Table className='min-w-full'>
           <TableHeader className='font-bold bg-muted/50 text-foreground'>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>

components/conversation/conversation.tsx

@@ -360,8 +360,11 @@ export function ChatLog({
   }, [conversation]);
 
   return (
-    <div className='flex flex-col-reverse flex-grow overflow-auto bg-background pb-28' style={{ flexBasis: '0px' }}>
-      <div className='flex flex-col h-min'>
+    <div
+      className='flex flex-col-reverse flex-grow overflow-y-auto overflow-x-hidden bg-background pb-28'
+      style={{ flexBasis: '0px' }}
+    >
+      <div className='flex flex-col h-min min-w-0'>
         {conversation && conversation.length > 0 ? (
           conversation
             .filter((chatItem) => {