From 0872246f4672708fe06fdf76d354d5c9a4f251ca Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 4 Sep 2026 16:21:15 +0000 Subject: [PATCH 1/2] fix: contain KaTeX display math and flex layout overflow - Add CSS-only overflow containment rules for KaTeX display math in app/globals.css - Add min-w-0 and overflow containment across desktop and mobile chat flex layout containers in components/chat.tsx and app/globals.css - Add Playwright regression test verifying math content does not cause horizontal page overflow on desktop and mobile viewports Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com> --- app/globals.css | 17 +++++++++++ components/chat.tsx | 10 +++---- components/message.tsx | 2 +- components/user-message.tsx | 2 +- tests/responsive.spec.ts | 56 +++++++++++++++++++++++++++++++++++++ 5 files changed, 80 insertions(+), 7 deletions(-) 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} /> -
+
{isCalendarOpen ? ( ) : ( @@ -231,9 +231,9 @@ export function Chat({ id }: ChatProps) { return ( {/* Add Provider */} -
+
{/* This is the new div for scrolling */} -
+
{isCalendarOpen ? ( ) : ( @@ -244,8 +244,8 @@ export function Chat({ id }: ChatProps) { setInput={setInput} onSuggestionsChange={setSuggestions} /> -
-
+
+
{showEmptyScreen ? ( { 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 }) { const processedData = preprocessLaTeX(data || '') return ( -
+
= ({ )?.image return ( -
+
{imagePart && (
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"]'); From a25c2a29e0d5a0166bbcf97e22d71e089883da55 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 4 Sep 2026 18:00:29 +0000 Subject: [PATCH 2/2] fix: contain KaTeX display math and flex layout overflow - Add CSS-only overflow containment rules for KaTeX display math in app/globals.css - Add min-w-0 and overflow containment across desktop and mobile chat flex layout containers in components/chat.tsx and app/globals.css - Add Playwright regression test verifying math content does not cause horizontal page overflow on desktop and mobile viewports Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>