Formatting #772

Activity

1. ngoiyaeric commented on Sep 2, 2026

   

   ngoiyaeric

   on Sep 2, 2026

   CollaboratorAuthor

   More actions

   @coderabbitai plan
2. coderabbitai commented on Sep 2, 2026

   

   coderabbitaibot

   on Sep 2, 2026 – with coderabbitai

   Contributor

   More actions

   Coding Plan

   Summary

   • Add scoped .katex-display CSS in app/globals.css so each display equation becomes its own horizontal scroll region and stays within max-width: 100%.
   • Add min-w-0 (desktop) and min-width: 0 plus overflow-x: hidden (mobile) to the chat layout containers so wide content cannot stretch the message column or leak into the vertical scroll.
   • Keep the existing overflow-x-auto wrapper and KaTeX stylesheet import unchanged as a fallback for other wide content.
   • Add a viewport-driven Playwright regression test for horizontal overflow with math content.

   Implementation Steps

   Phase 1: Constrain display math to its own scroll region

   This phase makes each display equation the horizontal scroll container. It prevents a wide equation from expanding its parent width. This is the primary, targeted fix for the overflow described in the ticket.

   Task 1: Add KaTeX overflow rules to global styles

   Add math-specific CSS so display math clips and scrolls inside its own bounds.

   • Add rules for .katex-display in app/globals.css.
   • Set max-width: 100%, overflow-x: auto, and overflow-y: hidden on .katex-display so wide block equations scroll horizontally inside their own box instead of stretching the message.
   • Add max-width: 100% on .katex-display > .katex to keep the inner KaTeX element bounded.
   • Scope the rules under the markdown container (for example .prose .katex-display) to avoid affecting unrelated KaTeX usage, and to align with the existing prose styling in BotMessage.
   • Keep the existing katex/dist/katex.min.css import unchanged. The new rules extend the vendor stylesheet.

   Task 2: Verify the per-message scroll wrapper still applies

   Confirm the existing wrapper in BotMessage continues to work with the new math rules.

   • Keep the overflow-x-auto wrapper in components/message.tsx as a fallback for other wide content (tables, code blocks).
   • No code change is required here. The .katex-display rules from Task 1.1 now handle math overflow before the outer wrapper engages.

   🤖 Prompt for AI agents

   Implement CSS-only overflow containment for KaTeX display math so wide equations
   do not expand their parent container.
   
   - In `app/globals.css`, add rules for `.katex-display` scoped under the markdown
   container (for example `.prose .katex-display`).
   - On `.katex-display`, set `max-width: 100%`, `overflow-x: auto`, and
   `overflow-y: hidden` so wide block equations scroll horizontally inside their
   own box instead of stretching the message.
   - On `.katex-display > .katex`, set `max-width: 100%` to keep the inner KaTeX
   element bounded.
   - Keep the existing `katex/dist/katex.min.css` import in place. Treat the new
   rules as an extension of the vendor stylesheet, not a replacement.
   - Do not change `components/message.tsx`. Keep the existing `overflow-x-auto`
   wrapper on the markdown tree as a fallback for other wide content, such as
   tables and code blocks. The new `.katex-display` rules handle math overflow
   before that wrapper engages, so no code change is needed there.
   

   Phase 2: Add width containment to the chat layout chain

   This phase prevents any residual wide content from propagating horizontal growth up through the flex layout. Flex items default to min-width: auto, so intrinsically wide children can stretch the column. This phase makes the containment reliable across desktop and mobile.

   Task 1: Contain the desktop message column

   Prevent the desktop chat column from growing past its intended width.

   • Update components/chat.tsx desktop layout.
   • Add min-w-0 to the w-1/2 flex flex-col ... overflow-y-auto message column so a wide child cannot force it past 50% width.
   • Add min-w-0 to the outer flex justify-start items-start row that contains the message column and the map panel.
   • Add min-w-0 to the intermediate wrapper divs (relative min-h-[100px] and the transition-all duration-300 wrapper) so intrinsic width does not propagate through nested block containers.

   Task 2: Contain the mobile message area

   Prevent the mobile chat area from allowing horizontal growth.

   • Update the .mobile-chat-messages-area rule in app/globals.css.
   • Add min-width: 0 next to the existing min-height: 0.
   • Add overflow-x: hidden so horizontal overflow cannot leak into the mobile vertical scroll region.

   🤖 Prompt for AI agents

   Add flex-layout width containment across the desktop and mobile chat layout
   chain so wide content cannot stretch the chat column, on top of the
   math-specific fix from Phase 1.
   
   - In `components/chat.tsx`, on the desktop layout:
   - Add `min-w-0` to the `w-1/2 flex flex-col ... overflow-y-auto` message column
   so a wide child cannot force it past 50% width.
   - Add `min-w-0` to the outer `flex justify-start items-start` row that contains
   the message column and the map panel.
   - Add `min-w-0` to the intermediate wrapper divs, specifically the `relative
   min-h-[100px]` wrapper and the `transition-all duration-300` wrapper, so
   intrinsic width does not propagate through nested block containers.
   - In `app/globals.css`, update the `.mobile-chat-messages-area` rule:
     - Add `min-width: 0` next to the existing `min-height: 0`.
   - Add `overflow-x: hidden` so horizontal overflow cannot leak into the mobile
   vertical scroll region.
   

   Phase 3: Add a regression test for horizontal overflow

   This phase adds an automated check so the overflow does not return. It follows the existing viewport-driven test conventions.

   Add an overflow assertion for math content

   Add a Playwright test that sends a message with a wide equation and checks that no horizontal page overflow occurs.

   • Add the test in tests/responsive.spec.ts, next to the existing should prevent horizontal scroll test.
   • Reuse the existing pattern that compares document.body.scrollWidth to the hardcoded viewport width.
   • Run the check at the mobile viewport 375×667 and at least one desktop viewport, matching existing test.use({ viewport }) usage.
   • Use the existing data-testid selectors for the chat input and submit control to send a message that contains a long inline and display equation.
   • Assert that the message column boundingBox().width stays within the viewport width, matching the existing overflow-proxy assertions in the file.

   🤖 Prompt for AI agents

   Add a Playwright regression test that verifies math content does not cause
   horizontal page overflow.
   
   - Add the test in `tests/responsive.spec.ts`, next to the existing `should
   prevent horizontal scroll` test.
   - Reuse the existing pattern that compares `document.body.scrollWidth` to the
   hardcoded viewport width.
   - Run the check at the mobile viewport `375×667` and at least one desktop
   viewport, matching the existing `test.use({ viewport })` usage in the file.
   - Use the existing `data-testid` selectors for the chat input and submit control
   to send a message that contains a long inline equation and a long display
   equation.
   - Assert that the message column `boundingBox().width` stays within the viewport
   width, matching the existing overflow-proxy assertions in the file.
   - Confirm the `data-testid` selectors used in this test resolve against the
   current components. Some existing test IDs may be stale. Add any missing
   required `data-testid` attributes, but keep that change minimal and limited to
   what this test needs.
   - Do not add math plugins to `components/skyfi-section.tsx` or
   `components/report-template.tsx`. They do not render math and are out of scope.
   

   Research

   The application renders bot chat output in components/message.tsx (BotMessage). BotMessage uses MemoizedReactMarkdown (from components/ui/markdown.tsx) with remark-math and rehype-katex, and imports katex/dist/katex.min.css. It wraps the whole markdown tree in a single overflow-x-auto div.

   The chat layout chain is components/chat.tsx → components/chat-messages.tsx → components/collapsible-message.tsx → BotMessage. The vertical scroll boundary is set in components/chat.tsx (desktop w-1/2 flex flex-col ... overflow-y-auto) and in app/globals.css (.mobile-chat-messages-area).

   No ancestor sets min-w-0 or overflow-x-hidden. app/globals.css has no .katex or .katex-display rules.

   The only other markdown consumer, components/skyfi-section.tsx, does not render math and is out of scope.

   ---

   🚀 Next Steps

   🤖 All AI agent prompts combined

   Task: 1
   
   Implement CSS-only overflow containment for KaTeX display math so wide equations
   do not expand their parent container.
   
   - In `app/globals.css`, add rules for `.katex-display` scoped under the markdown
   container (for example `.prose .katex-display`).
   - On `.katex-display`, set `max-width: 100%`, `overflow-x: auto`, and
   `overflow-y: hidden` so wide block equations scroll horizontally inside their
   own box instead of stretching the message.
   - On `.katex-display > .katex`, set `max-width: 100%` to keep the inner KaTeX
   element bounded.
   - Keep the existing `katex/dist/katex.min.css` import in place. Treat the new
   rules as an extension of the vendor stylesheet, not a replacement.
   - Do not change `components/message.tsx`. Keep the existing `overflow-x-auto`
   wrapper on the markdown tree as a fallback for other wide content, such as
   tables and code blocks. The new `.katex-display` rules handle math overflow
   before that wrapper engages, so no code change is needed there.
   ===============================================================================
   
   Task: 2
   
   Add flex-layout width containment across the desktop and mobile chat layout
   chain so wide content cannot stretch the chat column, on top of the
   math-specific fix from Phase 1.
   
   - In `components/chat.tsx`, on the desktop layout:
   - Add `min-w-0` to the `w-1/2 flex flex-col ... overflow-y-auto` message column
   so a wide child cannot force it past 50% width.
   - Add `min-w-0` to the outer `flex justify-start items-start` row that contains
   the message column and the map panel.
   - Add `min-w-0` to the intermediate wrapper divs, specifically the `relative
   min-h-[100px]` wrapper and the `transition-all duration-300` wrapper, so
   intrinsic width does not propagate through nested block containers.
   - In `app/globals.css`, update the `.mobile-chat-messages-area` rule:
     - Add `min-width: 0` next to the existing `min-height: 0`.
   - Add `overflow-x: hidden` so horizontal overflow cannot leak into the mobile
   vertical scroll region.
   ===============================================================================
   
   Task: 3
   
   Add a Playwright regression test that verifies math content does not cause
   horizontal page overflow.
   
   - Add the test in `tests/responsive.spec.ts`, next to the existing `should
   prevent horizontal scroll` test.
   - Reuse the existing pattern that compares `document.body.scrollWidth` to the
   hardcoded viewport width.
   - Run the check at the mobile viewport `375×667` and at least one desktop
   viewport, matching the existing `test.use({ viewport })` usage in the file.
   - Use the existing `data-testid` selectors for the chat input and submit control
   to send a message that contains a long inline equation and a long display
   equation.
   - Assert that the message column `boundingBox().width` stays within the viewport
   width, matching the existing overflow-proxy assertions in the file.
   - Confirm the `data-testid` selectors used in this test resolve against the
   current components. Some existing test IDs may be stale. Add any missing
   required `data-testid` attributes, but keep that change minimal and limited to
   what this test needs.
   - Do not add math plugins to `components/skyfi-section.tsx` or
   `components/report-template.tsx`. They do not render math and are out of scope.
   

   💡 Iterate on the plan with: `@coderabbitai` <feedback>

   Example Feedback
   - `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
   - `@coderabbitai` For design choice 1 go ahead with option 3 and replan.
   

   ---