diff --git a/gui/src/components/StepContainer/StepContainer.tsx b/gui/src/components/StepContainer/StepContainer.tsx
index fc6981d0558..e5a587d6030 100644
--- a/gui/src/components/StepContainer/StepContainer.tsx
+++ b/gui/src/components/StepContainer/StepContainer.tsx
@@ -75,9 +75,9 @@ export default function StepContainer(props: StepContainerProps) {
   }
 
   return (
-    <div>
+    <div className="min-w-0">
       <div
-        className={`bg-background p-1 px-1.5 ${isBeforeLatestSummary ? "opacity-35" : ""}`}
+        className={`bg-background min-w-0 p-1 px-1.5 ${isBeforeLatestSummary ? "opacity-35" : ""}`}
       >
         {uiConfig?.displayRawMarkdown ? (
           <pre className="text-2xs max-w-full overflow-x-auto whitespace-pre-wrap break-words p-4">
diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx
index 2ff217a6147..3018da909b7 100644
--- a/gui/src/components/StyledMarkdownPreview/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/index.tsx
@@ -37,6 +37,8 @@ const StyledMarkdown = styled.div<{
   whiteSpace: string;
   bgColor: string;
 }>`
+  min-width: 0;
+  max-width: 100%;
   h1 {
     font-size: 1.25em;
   }
@@ -66,7 +68,9 @@ const StyledMarkdown = styled.div<{
     background-color: ${vscEditorBackground};
     border-radius: ${defaultBorderRadius};
 
-    max-width: calc(100vw - 24px);
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
 
@@ -77,6 +81,8 @@ const StyledMarkdown = styled.div<{
     span.line:empty {
       display: none;
     }
+    overflow-wrap: anywhere;
+    word-break: break-word;
     word-wrap: break-word;
     border-radius: 0.3125rem;
     background-color: ${vscEditorBackground};
diff --git a/gui/src/pages/gui/Chat.tsx b/gui/src/pages/gui/Chat.tsx
index 00e04efd1f4..285c71361ae 100644
--- a/gui/src/pages/gui/Chat.tsx
+++ b/gui/src/pages/gui/Chat.tsx
@@ -355,7 +355,7 @@ export function Chat() {
 
       // Default case - regular assistant message
       return (
-        <div className="thread-message">
+        <div className="thread-message min-w-0">
           <TimelineItem
             item={item}
             iconElement={<ChatBubbleOvalLeftIcon width="16px" height="16px" />}
@@ -386,7 +386,7 @@ export function Chat() {
 
       <StepsDiv
         ref={stepsDivRef}
-        className={`pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "min-h-0 flex-1 overflow-y-scroll" : "shrink-0"}`}
+        className={`min-w-0 pt-[8px] ${showScrollbar ? "thin-scrollbar" : "no-scrollbar"} ${history.length > 0 ? "min-h-0 flex-1 overflow-x-hidden overflow-y-scroll" : "shrink-0"}`}
       >
         <DeprecationBanner dismissable={true} />
         {highlights}
diff --git a/gui/src/pages/gui/index.tsx b/gui/src/pages/gui/index.tsx
index d74b32c59c7..4ddcc0bca26 100644
--- a/gui/src/pages/gui/index.tsx
+++ b/gui/src/pages/gui/index.tsx
@@ -7,7 +7,7 @@ export default function GUI() {
       <aside className="4xl:flex border-vsc-input-border no-scrollbar hidden min-h-0 w-96 overflow-y-auto border-0 border-r border-solid">
         <History />
       </aside>
-      <main className="no-scrollbar flex min-h-0 flex-1 flex-col">
+      <main className="no-scrollbar flex min-h-0 min-w-0 flex-1 flex-col">
         <Chat />
       </main>
     </div>