Accordian in rx.foreach has broken styling

[adlee-zag]

Describe the bug
When an accordion (root + item or just single item) is rendered in a rx.foreach loop, the accordion does not render to the correct width: no matter what width you pass.

To Reproduce
Create an accordion function. Use the function inside a rx.foreach and the rendering is broken. Use the same function outside a rx.foreach and it renders as expected.

• Code/Link to Repo:

import reflex as rx


class State(rx.State):
    items: list[str] = ['one', 'two', 'three']


def accordion() -> rx.Component:
    return rx.accordion.root(
        rx.accordion.item(
            header='Click me',
            content=rx.text('Content here'),
        ),
        type='single',
        collapsible=True,
        width='400px',
    )

def show_item(_: rx.Var[str]) -> rx.Component:
    return accordion()


@rx.page(route='/', title='Accordion Bug Repro')
def index() -> rx.Component:
    return rx.center(
        rx.vstack(
            rx.heading('Accordion inside rx.foreach — BROKEN', size='4'),
            rx.foreach(State.items, show_item),

            rx.separator(),

            rx.heading('Same accordion outside rx.foreach — WORKS', size='4'),
            accordion(),
        ),
        height='100vh',
    )


app = rx.App()

Expected behavior
The accordion in the rx.foreach should have the same styling as the accordian outside rx.foreach

Screenshots

Specifics (please complete the following information):

• Python Version: 0.9.2
• Reflex Version: 3.12.10
• OS: macOS 15.7.5 (24G624)
• Browser (Optional): Chrome 148.0.7778.97 and Safari 26.4 (20624.1.16.18.2)

[linear]

ENG-9510