When I send a code block or a field with tags, the dialog box extends beyond the window

[Mgrsc]

Describe the bug When I send a code block or a field with tags, the dialog box extends beyond the window.

To Reproduce

send

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNjAwIj4KICA8cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iI2Y2ZjZmMCIvPgogIDx0ZXh0IHg9IjIwMCIgeT0iNjAiIGZvbnQtZmFtaWx5PSJNYSBTaGFuIFpoZW5nLCBjdXJzaXZlIiBmb250LXNpemU9IjM2IiBmaWxsPSIjMmMzZTUwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7msYnor63mlrDop6M8L3RleHQ+CiAgPGxpbmUgeDE9IjQwIiB5MT0iODAiIHgyPSIzNjAiIHkyPSI4MCIgc3Ryb2tlPSIjMmMzZTUwIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8dGV4dCB4PSI1MCIgeT0iMTIwIiBmb250LWZhbWlseT0iTm90byBTZXJpZiBTQywgc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMzNDQ5NWUiPuekvuS8muemj+WIqTwvdGV4dD4KICA8dGV4dCB4PSI1MCIgeT0iMTUwIiBmb250LWZhbWlseT0iTm90byBTYW5zIFNDLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjN2Y4YzhkIj5zaMOoIGh1w6wgZsO6IGzDrDwvdGV4dD4KICA8dGV4dCB4PSI1MCIgeT0iMTgwIiBmb250LWZhbWlseT0iTm90byBTYW5zLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjN2Y4YzhkIj5Tb2NpYWwgd2VsZmFyZTwvdGV4dD4KICA8dGV4dCB4PSI1MCIgeT0iMjEwIiBmb250LWZhbWlseT0iTm90byBTYW5zIEpQLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjN2Y4YzhkIj7npL7kvJrnpo/npYk8L3RleHQ+CiAgPHRleHQgeD0iNTAiIHk9IjI2MCIgZm9udC1mYW1pbHk9Ik5vdG8gU2VyaWYgU0MsIHNlcmlmIiBmb250LXNpemU9IjE4IiBmaWxsPSIjMmMzZTUwIj4KICAgIDx0c3BhbiB4PSI1MCIgZHk9IjAiPuaUv+W6nOeahCLmuKnmn5TpmbfpmLEi77yMPC90c3Bhbj4KICAgIDx0c3BhbiB4PSI1MCIgZHk9IjMwIj7nlKjns5booaPljIXoo7nnmoTplaPpk5DjgII8L3RzcGFuPgogICAgPHRzcGFuIHg9IjUwIiBkeT0iMzAiPueci+S8vOaFt+aFqOeahOaPtOaJi++8jDwvdHNwYW4+CiAgICA8dHNwYW4geD0iNTAiIGR5PSIzMCI+5a6e5YiZ5piv57K+5b+D6K6+6K6h55qE6bif56y844CCPC90c3Bhbj4KICAgIDx0c3BhbiB4PSI1MCIgZHk9IjMwIj7lroPorqnkvaDlronpgLjvvIzljbTkuZ/orqnkvaDkvp3otZbvvJs8L3RzcGFuPgogICAgPHRzcGFuIHg9IjUwIiBkeT0iMzAiPuWug+e7meS9oOS/neaKpO+8jOWQjOaXtuWJpeWkuuS9oOeahOe/heiGgOOAgjwvdHNwYW4+CiAgICA8dHNwYW4geD0iNTAiIGR5PSIzMCI+6L+Z5piv5LiA5Zy657K+5b+D57yW57uH55qE576O5qKm77yMPC90c3Bhbj4KICAgIDx0c3BhbiB4PSI1MCIgZHk9IjMwIj7phpLmnaXml7bvvIzkvaDlt7LlpLHljrvkuobpo57nv5TnmoTog73lipvjgII8L3RzcGFuPgogIDwvdGV4dD4KPC9zdmc+" alt="Red dot" />

or send

    ```python
@trace
def oauth_callback(
    func: Callable[
        [str, str, Dict[str, str], User, Optional[str]], Awaitable[Optional[User]]
    ],
) -> Callable:
    """
    Framework agnostic decorator to authenticate the user via oauth

    Args:
        func (Callable[[str, str, Dict[str, str], User, Optional[str]], Awaitable[Optional[User]]]): The authentication callback to execute.

    Example:
        @cl.oauth_callback
        async def oauth_callback(provider_id: str, token: str, raw_user_data: Dict[str, str], default_app_user: User, id_token: Optional[str]) -> Optional[User]:

    Returns:
        Callable[[str, str, Dict[str, str], User, Optional[str]], Awaitable[Optional[User]]]: The decorated authentication callback.
    """

    if len(get_configured_oauth_providers()) == 0:
        raise ValueError(
            "You must set the environment variable for at least one oauth provider to use oauth authentication."
        )

    config.code.oauth_callback = wrap_user_function(func)
    return func

**Expected behavior**
Normally within the window range

**Screenshots**
![image](https://github.com/user-attachments/assets/0fdb145d-97bf-416f-85e9-1330ac3015ed)
![image](https://github.com/user-attachments/assets/0e12fab3-fbd2-431b-af14-f9cf8e4d0afd)

**Desktop (please complete the following information):**

- OS: [windows11]
- Browser [firefox,edge,chrome]

[dosubot[bot]]

To address the issue of dialog boxes extending beyond the window when sending code blocks or fields with tags in Chainlit, you can try the following solutions:

1. CSS Adjustments: Ensure that the CSS for dialog boxes includes properties to handle overflow. You can add or modify the CSS to include overflow: auto; or overflow: scroll; to ensure content is contained within the dialog box.

2. Responsive Design: Check if the dialog box component is using responsive design techniques. You might need to set a maximum width or use media queries to adjust the size based on the screen size.

3. ScrollContainer Component: Chainlit uses a ScrollContainer component with overflowY: 'auto' to manage scrolling. Ensure this is applied to your dialog boxes to handle content overflow properly ^[1].

4. Custom Configuration: If you have custom CSS or JavaScript, ensure they are correctly configured in the config.toml file to override default styles if necessary ^[2].

These steps should help in managing the dialog box size and preventing it from extending beyond the window.

To continue talking to Dosu, mention @dosu.