CSS: position: sticky not working

[TommyTunaToro]

Describe the bug

Trying to make a Chatbot with a "Stats box" on top of the chatbot, however, I do want to make the Stats box a sticky component meaning when I scrolled down too much it always stay on top. Please help!

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

css = """
#stay-on-top {
    position: sticky;
    }
"""

with gr.Blocks(css=css) as demo:
    visible_component = gr.Textbox(label="I stay on top when scrolled", elem_id="stay-on-top")
    gr.Textbox(label="placeholder", lines=50)


demo.launch(server_port=7870)

Screenshot

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.19.2
gradio_client version: 0.10.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.109.0
ffmpy: 0.3.1
gradio-client==0.10.1 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.3
importlib-resources: 6.1.1
jinja2: 3.1.3
markupsafe: 2.1.4
matplotlib: 3.8.2
numpy: 1.22.0
orjson: 3.9.12
packaging: 23.2
pandas: 1.5.3
pillow: 10.2.0
pydantic: 2.5.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.2.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
uvicorn: 0.26.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.12.2
httpx: 0.26.0
huggingface-hub: 0.20.3
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

I can work around it