diff --git a/app/globals.css b/app/globals.css
index 019a3473..80a44ada 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -175,11 +175,13 @@
   .mobile-chat-messages-area {
     flex: 1; /* Changed from height: 40vh to take available space */
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 12px;
     background-color: hsl(var(--card));
     color: hsl(var(--card-foreground));
     box-sizing: border-box;
     min-height: 0;
+    min-width: 0;
     border-radius: 16px;
     border: 1px solid hsl(var(--border));
     margin: 4px 8px 8px 8px;
@@ -272,3 +274,18 @@
 .mapboxgl-compact {
   display: none !important;
 }
+
+/* KaTeX display math overflow containment */
+.prose .katex-display,
+.prose-sm .katex-display,
+.katex-display {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prose .katex-display > .katex,
+.prose-sm .katex-display > .katex,
+.katex-display > .katex {
+  max-width: 100%;
+}
diff --git a/components/chat.tsx b/components/chat.tsx
index b18a8f17..389764ac 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -201,7 +201,7 @@ export function Chat({ id }: ChatProps) {
             onSuggestionsChange={setSuggestions}
           />
         </div>
-        <div className="mobile-chat-messages-area relative">
+        <div className="mobile-chat-messages-area relative" data-testid="chat-container">
           {isCalendarOpen ? (
             <CalendarNotepad chatId={id} />
           ) : (
@@ -231,9 +231,9 @@ export function Chat({ id }: ChatProps) {
   return (
     <MapDataProvider> {/* Add Provider */}
       <HeaderSearchButton />
-      <div className="flex justify-start items-start">
+      <div className="flex justify-start items-start min-w-0">
         {/* This is the new div for scrolling */}
-        <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-16 md:pt-20 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
+        <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-16 md:pt-20 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto min-w-0" data-testid="chat-container">
         {isCalendarOpen ? (
           <CalendarNotepad chatId={id} />
         ) : (
@@ -244,8 +244,8 @@ export function Chat({ id }: ChatProps) {
               setInput={setInput} 
               onSuggestionsChange={setSuggestions}
             />
-            <div className="relative min-h-[100px]">
-              <div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
+            <div className="relative min-h-[100px] min-w-0">
+              <div className={cn("transition-all duration-300 min-w-0", suggestions ? "blur-md pointer-events-none" : "")}>
                 {showEmptyScreen ? (
                   <EmptyScreen
                     submitMessage={message => {
diff --git a/components/message.tsx b/components/message.tsx
index 264aa1f6..5d45a752 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -18,7 +18,7 @@ export function BotMessage({ content }: { content: StreamableValue<string> }) {
   const processedData = preprocessLaTeX(data || '')
 
   return (
-    <div className="overflow-x-auto">
+    <div className="overflow-x-auto" data-testid="bot-message">
       <MemoizedReactMarkdown
         rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }], rehypeKatex]}
         remarkPlugins={[remarkGfm, remarkMath]}
diff --git a/components/user-message.tsx b/components/user-message.tsx
index 03b8ea8d..3b7ad8da 100644
--- a/components/user-message.tsx
+++ b/components/user-message.tsx
@@ -32,7 +32,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
   )?.image
 
   return (
-    <div className="flex items-start w-full space-x-3 mt-2">
+    <div className="flex items-start w-full space-x-3 mt-2" data-testid="user-message">
       <div className="flex-1 space-y-2">
         {imagePart && (
           <div className="p-2 border rounded-lg bg-muted w-fit">
diff --git a/tests/responsive.spec.ts b/tests/responsive.spec.ts
index e3129237..82c6c09f 100644
--- a/tests/responsive.spec.ts
+++ b/tests/responsive.spec.ts
@@ -40,6 +40,31 @@ test.describe('Responsive design - Desktop', () => {
     expect(chatBox).toBeTruthy();
     expect(mapBox).toBeTruthy();
   });
+
+  test('should prevent math content horizontal page overflow on desktop', async ({ page }) => {
+    const chatInput = page.locator('[data-testid="chat-input"]');
+    await expect(chatInput).toBeVisible();
+
+    const mathMessage = 'Inline equation: $f(x) = \\sum_{i=1}^{100} \\frac{x_i^2 + y_i^2 + z_i^2 + w_i^2}{\\sqrt{\\alpha_i + \\beta_i + \\gamma_i + \\delta_i}}$ and display equation: $$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi} \\cdot \\frac{\\sum_{n=1}^{50} (n^2 + 2n + 1)}{\\prod_{k=1}^{20} (k + \\frac{1}{k})} \\cdot \\text{Super Long Math Line That Extends Significantly Beyond Standard Container Width}$$';
+
+    await chatInput.fill(mathMessage);
+    await page.click('[data-testid="chat-submit"]');
+
+    const userMessage = page.locator('[data-testid="user-message"]').last();
+    await expect(userMessage).toBeVisible();
+
+    const chatContainer = page.locator('[data-testid="chat-container"]');
+    if (await chatContainer.isVisible()) {
+      const chatBox = await chatContainer.boundingBox();
+      expect(chatBox).toBeTruthy();
+      if (chatBox) {
+        expect(chatBox.width).toBeLessThanOrEqual(1920);
+      }
+    }
+
+    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
+    expect(bodyWidth).toBeLessThanOrEqual(1920 + 1);
+  });
 });
 
 test.describe('Responsive design - Tablet', () => {
@@ -183,6 +208,37 @@ test.describe('Responsive design - Mobile', () => {
     expect(bodyWidth).toBeLessThanOrEqual(viewportWidth + 1); // +1 for rounding
   });
 
+  test('should prevent math content horizontal page overflow on mobile', async ({ page }) => {
+    const chatInput = page.locator('[data-testid="chat-input"]');
+    await expect(chatInput).toBeVisible();
+
+    const mathMessage = 'Inline equation: $f(x) = \\sum_{i=1}^{100} \\frac{x_i^2 + y_i^2 + z_i^2 + w_i^2}{\\sqrt{\\alpha_i + \\beta_i + \\gamma_i + \\delta_i}}$ and display equation: $$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi} \\cdot \\frac{\\sum_{n=1}^{50} (n^2 + 2n + 1)}{\\prod_{k=1}^{20} (k + \\frac{1}{k})} \\cdot \\text{Super Long Math Line That Extends Significantly Beyond Standard Container Width}$$';
+
+    await chatInput.fill(mathMessage);
+
+    const submitButton = page.locator('[data-testid="mobile-submit-button"]');
+    if (await submitButton.isVisible()) {
+      await submitButton.click();
+    } else {
+      await page.click('[data-testid="chat-submit"]');
+    }
+
+    const userMessage = page.locator('[data-testid="user-message"]').last();
+    await expect(userMessage).toBeVisible();
+
+    const chatContainer = page.locator('[data-testid="chat-container"]');
+    if (await chatContainer.isVisible()) {
+      const chatBox = await chatContainer.boundingBox();
+      expect(chatBox).toBeTruthy();
+      if (chatBox) {
+        expect(chatBox.width).toBeLessThanOrEqual(375);
+      }
+    }
+
+    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
+    expect(bodyWidth).toBeLessThanOrEqual(375 + 1);
+  });
+
   test('should stack elements vertically', async ({ page }) => {
     await page.fill('[data-testid="chat-input"]', 'Mobile test message');
     await page.click('[data-testid="mobile-submit-button"]');