fix: overflow content codeblock (#5110)

web-app/src/containers/RenderMarkdown.tsx

@@ -111,9 +111,10 @@ function RenderMarkdownComponent({
               language={language}
               showLineNumbers={showLineNumbers}
               wrapLines={true}
-              lineProps={{
-                style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
-              }}
+              // Temporary comment we try calculate main area width on __root
+              // lineProps={{
+              //   style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
+              // }}
               customStyle={{
                 margin: 0,
                 padding: '8px',

web-app/src/containers/ThinkingBlock.tsx

@@ -33,7 +33,10 @@ const ThinkingBlock = ({ id, text }: Props) => {
   if (!text.replace(/<\/?think>/g, '').trim()) return null
 
   return (
-    <div className="mx-auto w-full cursor-pointer" onClick={handleClick}>
+    <div
+      className="mx-auto w-full cursor-pointer break-words"
+      onClick={handleClick}
+    >
       <div className="mb-4 rounded-lg bg-main-view-fg/4 border border-dashed border-main-view-fg/10 p-2">
         <div className="flex items-center gap-3">
           {loading && (

web-app/src/containers/ThreadContent.tsx

@@ -171,10 +171,12 @@ export const ThreadContent = memo(
     return (
       <Fragment>
         {item.content?.[0]?.text && item.role === 'user' && (
-          <div>
-            <div className="flex justify-end w-full">
-              <div className="bg-main-view-fg/4 text-main-view-fg p-2 rounded-md inline-block">
-                <p className="select-text">{item.content?.[0].text.value}</p>
+          <div className="w-full">
+            <div className="flex justify-end w-full text-start break-words whitespace-normal">
+              <div className="bg-main-view-fg/4 relative text-main-view-fg p-2 rounded-md inline-block max-w-[70%]">
+                <div className="whitespace-pre-wrap select-text">
+                  {item.content?.[0].text.value}
+                </div>
               </div>
             </div>
             <div className="flex items-center justify-end gap-2 text-main-view-fg/60 text-xs mt-2">

web-app/src/containers/ToolCallBlock.tsx

@@ -36,7 +36,10 @@ const ToolCallBlock = ({ id, name, result, loading }: Props) => {
   }
 
   return (
-    <div className="mx-auto w-full cursor-pointer mt-4" onClick={handleClick}>
+    <div
+      className="mx-auto w-full cursor-pointer mt-4 break-words"
+      onClick={handleClick}
+    >
       <div className="mb-4 rounded-lg bg-main-view-fg/4 border border-dashed border-main-view-fg/10">
         <div className="flex items-center gap-3 p-2">
           {loading && (

web-app/src/routes/__root.tsx

@@ -15,6 +15,8 @@ import { ToasterProvider } from '@/providers/ToasterProvider'
 import { useAnalytic } from '@/hooks/useAnalytic'
 import { PromptAnalytic } from '@/containers/analytics/PromptAnalytic'
 import { AnalyticProvider } from '@/providers/AnalyticProvider'
+import { useLeftPanel } from '@/hooks/useLeftPanel'
+import { cn } from '@/lib/utils'
 
 export const Route = createRootRoute({
   component: RootLayout,
@@ -22,6 +24,7 @@ export const Route = createRootRoute({
 
 const AppLayout = () => {
   const { productAnalyticPrompt } = useAnalytic()
+  const { open: isLeftPanelOpen } = useLeftPanel()
 
   return (
     <Fragment>
@@ -36,7 +39,12 @@ const AppLayout = () => {
           <LeftPanel />
 
           {/* Main content panel */}
-          <div className="h-full flex w-full p-1">
+          <div
+            className={cn(
+              'h-full flex w-full p-1',
+              isLeftPanelOpen && 'w-[calc(100%-192px)]'
+            )}
+          >
             <div className="bg-main-view text-main-view-fg border border-main-view-fg/5 w-full rounded-lg overflow-hidden">
               <Outlet />
             </div>

web-app/src/routes/threads/$threadId.tsx

@@ -181,7 +181,7 @@ function ThreadDetail() {
             'flex flex-col h-full w-full overflow-auto px-4 pt-4 pb-3'
           )}
         >
-          <div className="max-w-none w-4/6 mx-auto">
+          <div className="w-4/6 mx-auto flex max-w-full flex-col grow">
             {messages &&
               messages.map((item, index) => {
                 // Only pass isLastMessage to the last message in the array