fix(ui): prevent double vertical scrollbars in latex math rendering

[Siddhu2k04]

Fix duplicate vertical scrollbar when LaTeX rendering is enabled

Summary

This PR fixes an issue where enabling latex=true in config.toml could cause two vertical scrollbars to appear in the chat UI when rendering LaTeX content.

Root Cause

The chat interface already provides a scrollable container for messages. When LaTeX content is rendered, the math wrapper may introduce additional overflow behavior, creating a nested scroll container and resulting in duplicate vertical scrollbars.

Changes

• Removed unnecessary vertical overflow handling from LaTeX rendering containers.

• Restricted LaTeX elements to horizontal scrolling only when needed.

• Ensured the main chat container remains the sole vertical scroll region.

• Preserved existing LaTeX rendering behavior and layout.

Before

• latex=true enabled.

• Sending multiple messages containing LaTeX equations eventually displays two vertical scrollbars.

After

• Only one vertical scrollbar is displayed.

• LaTeX equations render correctly.

• Normal chat scrolling behavior remains unchanged.

Testing

Reproduction Steps

1. Enable latex=true in config.toml.

2. Run the following application:

import chainlit as cl
@cl.on_message

async def main(message: cl.Message):

await cl.Message(

content="Here is the quadratic formula:\n$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$"

).send()

3. Start Chainlit.

4. Send messages multiple times until the chat becomes scrollable.

Results

Scenario	Result
Before Fix	Two vertical scrollbars appear
After Fix	Only one vertical scrollbar appears

References

• Fixes UI displays two vertical scrollbars with enabled latex rendering #2949

• Related to UI displays two vertical scrollbars whenever a custom element is rendered #2003

[cubic-dev-ai]

No issues found across 1 file

_{Re-trigger cubic}

[Siddhu2k04]

Hi @asvishnyakov and @sandangel,

I've submitted a fix for #2949 and verified that it resolves the duplicate vertical scrollbar issue when LaTeX rendering is enabled.

Could you please review the PR when you have a chance? Any feedback is appreciated.

Thanks! 🚀

[github-actions]

This PR is stale because it has been open for 14 days with no activity.

[tjroamer]

Please someone to merge this PR? We need this issue to be fixed in the production. Thanks in advance.

[tmueller-hsetu]

The CSS approach in this PR (setting overflow-y: hidden on .katex, .katex-display etc.) did not resolve the issue in our case.

After digging into frontend/src/components/chat/ScrollContainer.tsx, we found the actual root cause: the outer wrapper <div> at line 196 has overflow-y-auto even though it only exists to position the scroll-to-bottom button (absolute). When LaTeX content is rendered and the inner scroll div grows, both divs trigger their own scrollbar simultaneously.

The fix that worked for us was changing the outer wrapper from overflow-y-auto to overflow-hidden in ScrollContainer.tsx:

// frontend/src/components/chat/ScrollContainer.tsx, line 196

// Before
<div className="relative flex flex-col flex-grow overflow-y-auto">

// After
<div className="relative flex flex-col flex-grow overflow-hidden">

This makes the inner <div ref={ref} ... overflow-y-auto> the sole scrollable container, which is the intended behavior. The scroll-to-bottom button positioning is unaffected since it uses absolute.

Since we couldn't patch the source directly, we applied this as a JS workaround via MutationObserver:

document.querySelectorAll('div.relative.flex-grow.overflow-y-auto').forEach(wrapper => {
    if (wrapper.querySelector(':scope > div.overflow-y-auto')) {
        wrapper.style.overflowY = 'hidden';
    }
});

Would suggest updating this PR to target ScrollContainer.tsx instead of the KaTeX elements.