import gradio as gr

# Reproduction of https://github.com/gradio-app/gradio/issues/12089
# A component whose height is set with viewport units (vh) grows the embedded
# app infinitely tall on HF Spaces. The 100vh row fills whatever height the
# iframe is given, so its measured bottom tracks the viewport; the iframe-resizer
# then grows the iframe, which grows the row, which grows the iframe... forever.
#
# NOTE: only reproduces in the *embedded* (iframe) context — i.e. when you view
# this Space at huggingface.co/spaces/<owner>/<name>. The direct *.hf.space app
# URL is not embedded, so it will not loop there.

css = """
.example-wrapper {
   height: 100vh;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown(
        "# gradio#12089 — embedded app grows infinitely tall\n"
        "Watch the page height grow without bound below. "
        "The red row is `height: 100vh`."
    )
    with gr.Row(elem_classes="example-wrapper"):
        gr.Textbox(label="I am inside a 100vh row")

demo.launch()