code_block wrap_long_lines=True not working

[TSheyd]

Describe the bug
rx.code_block component does not wrap long lines when wrap_long_lines is set to True

To Reproduce
Steps to reproduce the behavior:

import reflex as rx


def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.heading("wrap_long_lines test"),
            rx.code_block(
                "def very_long_function_name_that_should_wrap_but_currently_shows_horizontal_scrollbar(param1, param2, param3, param4, param5, param6, param7, param8):\n    return param1 + param2 + param3 + param4 + param5 + param6 + param7 + param8",
                language="python",
                wrap_long_lines=True,
                width="400px",
            ),
            spacing="2",
        ),
    )


app = rx.App()
app.add_page(index, route="/")

Expected behavior
Long lines of code being wrapped to the next line. Instead, either a horizontal scrollbar appears (if the element's width is constrained), or the element is simply rendered in full width.

Screenshots

• For the code snippet above:

• If we remove the width constraint (comment out width="400px",) - code_block is rendered in full width, possibly overflowing the page.

Specifics (please complete the following information):

• Python Version: 3.11.13, also tested on 3.13
• Reflex Version: 0.8.23
• OS: Windows 11 / WSL (Ubuntu)
• Browser (Optional): Chrome 143

Additional context
I have also tried to force the desired behavior by specifying the style params: style={"whiteSpace": "pre-wrap", "wordBreak": "break-all"}, but these parameters do not make their way to the element on the page - there I still see word-break: normal and white-space: pre in the element's code.

This issue has already been raised before at #4325, seems like it has reintroduced itself.

[adhami3310]

the issue is upstream: react-syntax-highlighter/react-syntax-highlighter#597

as a workaround you can do:

code_tag_props={"style": {"whiteSpace": "pre-wrap"}},