Spaces:
Running on Zero
UI overflows when embedded in narrower components
I'm trying to embed this Space into our documentation for convenient inference, but I've noticed that the UI overflows horizontally after embedding. Here is how I'm embedding it and how it looks like:
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/5.31.0/gradio.js"></script>
<gradio-app src="https://bytedance-research-lance.hf.space"></gradio-app>
Adding appropriate CSS should resolve this issue; I would be extremely grateful if you could fix it. Thank you again for the great work!
Thank you so much for reporting this issue and for the kind words!
We have identified that this is likely caused by the current UI layout not being fully optimized for embedded or narrow-container scenarios. The Space works properly in the full-page Hugging Face Space view, but when embedded into documentation, the parent container can be narrower than the browser viewport, which may cause some UI components to overflow horizontally.
We will fix this in a future update by improving the responsive CSS for embedded layouts.
For now, if you need the interface to be displayed completely in your documentation, a temporary workaround is to slightly reduce the display scale or zoom level of the embedded area/page. This should allow the full UI to fit within the available width.
Thanks again for your feedback!