Gallery image overflow

[AntoineSueur]

Describe the bug

Gradio's Gallery component doesn't seem to support a large number of images that overflow the component. It is impossible to access the left-most images by scrolling. The user must use the arrows to access the first images.

Is this behavior expected and if not, would it be possible to make all images accessible ?

Have you searched existing issues? 🔎

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

Reproduction

import gradio as gr
from PIL import Image

with gr.Blocks() as demo:

    with gr.Row():
        gallery = gr.Gallery(
            label="Generated images",
            show_label=False,
            allow_preview=True,
            preview=True,
            value=[Image.new(mode="RGB", size=(64, 64)) for _ in range(40)],
        )

demo.launch()

Screenshot

Logs

No response

System Info

Gradio Environment Information:                                                                                                   
------------------------------                                                                                                    
Operating System: Linux                                                                                                           
gradio version: 4.21.0                                                                                                            
gradio_client version: 0.12.0                                                                                                     

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

aiofiles: 23.2.1                                                                                                                  
altair: 5.2.0                                                                                                                     
fastapi: 0.110.0
ffmpy: 0.3.2
gradio-client==0.12.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.21.4
importlib-resources: 6.1.3
jinja2: 3.1.3
markupsafe: 2.1.5
matplotlib: 3.8.3
numpy: 1.26.4
orjson: 3.9.15
packaging: 24.0
pandas: 2.2.1
pillow: 10.2.0
pydantic: 2.6.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.3.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.10.0
uvicorn: 0.28.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.2.0
httpx: 0.27.0           
huggingface-hub: 0.21.4                                          
packaging: 24.0
typing-extensions: 4.10.0
websockets: 11.0.3

Severity

I can work around it

[abidlabs]

Hi @AntoineSueur I can indeed scroll horizontally on the preview images, are you not able to do so?

https://github.com/gradio-app/gradio/assets/1778297/6e09dc01-d010-4571-a08a-2beff11b44f3

[AntoineSueur]

Hi @abidlabs, thanks for the quick answer ! No unfortunately it doesn't work on my side, checked on a different browser and OS just in case but still got the same issue. Here's a small recording : screen-capture.webm

Everything seems to work fine for the last elements but the first ones seem to remain hidden. Quick question on your video, is the first gallery thumbnail actually associated to the first image when inspecting the element ? When varying the window size, the first thumbnail can actually be associated to a another image than the first (13th in my case in the screenshot below)

[AntoineSueur]

@abidlabs Small update, seems like the default justify-content css value for the Gallery component was creating this issue.

Overriding it with a the following custom css fixed it:

.thumbnails.scroll-hide.svelte-hpz95u { justify-content: unset; padding-left: 5px; padding-right:5px;}