[Gradio 5] Some bugs with elements and css

[elismasilva]

Describe the bug

I am facing some bugs after gradio 5, some classes of theme is not applying properly and some components is rendering buged.

1 - Block border width - line between elements in same row is not appearing, even if it setted in my theme.
2 - Info text color - the color of info text color is always black , my provided value is not working.
3 - Tab render - elements inside tab is shifted to the right. like https://github.com/gradio-app/gradio/issues/9665
4 - Also about the tabs, before in Gradio 4 I was able to use the tabs vertically and loading the elements on the right. Now they only stay fixed horizontally.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr

from collections.abc import Iterable

from gradio.themes import Default
from gradio.themes.utils import fonts

class DiffusersPlatinum(Default):
    
    def __init__(
        self,
        *,       
        font: fonts.Font | str | Iterable[fonts.Font | str] = (
            gr.themes.GoogleFont("Karla"), 'Public Sans', 'system-ui', 'sans-serif'
        )
    ):
        super().__init__(          
            font=font,
        )
        self.name = "Diffusers"
        super().set(
            block_border_width='2px',
            block_border_width_dark='2px',                        
            block_info_text_size='*text_md',
            block_info_text_weight='500',
            block_info_text_color='#474a50',
            block_label_background_fill='*background_fill_secondary',
            block_label_text_color='*neutral_700',
            block_title_text_color='black',
            block_title_text_weight='600',
            block_background_fill='#fcfcfc',
            body_background_fill='*background_fill_secondary',
            body_text_color='black',
            background_fill_secondary='#f8f8f8',
            border_color_accent='*primary_50',
            border_color_primary='#ededed',
            color_accent='#7367f0',
            color_accent_soft='#fcfcfc',
            layout_gap='*spacing_xl',
            panel_background_fill='#fcfcfc',
            section_header_text_weight='600',
            checkbox_background_color='*background_fill_secondary',
            input_background_fill='white',        
            input_placeholder_color='*neutral_300',
            loader_color = '*primary_50',        
            slider_color='#7367f0',
            table_odd_background_fill='*neutral_100',
            button_small_radius='*radius_sm',
            button_primary_background_fill='linear-gradient(to bottom right, #7367f0, #9c93f4)',
            button_primary_background_fill_hover='linear-gradient(to bottom right, #9c93f4, #9c93f4)',
            button_primary_background_fill_hover_dark='linear-gradient(to bottom right, #5e50ee, #5e50ee)',
            button_primary_border_color='#5949ed',
            button_primary_text_color='white'
        )

css="""
:root, .dark{
    --checkbox-label-gap: 0.25em 0.1em;
    --section-header-text-size: 12pt;       
}
.gradio-tab-item {
    background-color: #fcfcfc;
}

#settings{
    display: block;
}

#settings > div{
    border: none;
    margin-left: 10em;
    padding: 0 var(--spacing-xl);
}

#settings > div.tab-nav {
    float: left;
    display: block;
    margin-left: 0;
    width: 10em;
}

#settings > div.tab-nav button {
    display: block;
    border: none;
    text-align: left;
    white-space: initial;
    padding: 4px;
}

#settings > div.tab-nav .settings-category {
    display: block;
    margin: 1em 0 0.25em 0;
    font-weight: bold;
    text-decoration: underline;
    cursor: default;
    user-select: none;
}"""

def get_settings_tab():
    input_settings = []
    previous_category = None
    current_tab = None
    current_row = None
    for s in ["tab1", "tab2", "tab3"]:
                
        if previous_category != s:
            if current_tab is not None:
                current_row.__exit__()
                current_tab.__exit__()

            gr.Group()
            current_tab = gr.TabItem(elem_id=f"settings_{s}", label=s, interactive=True)
            current_tab.__enter__()
            current_row = gr.Column(scale=0, elem_id=f"column_settings_{s}", variant='compact')
            current_row.__enter__()
            previous_category = s

        with gr.Row():                                
            elem=gr.Dropdown
            elem_obj = elem(label=f"text_1_{s}", info="demo", value=None, elem_id=f"elem_{s}", interactive=True)                 
            
        input_settings.append(elem_obj)
    return input_settings

with gr.Blocks(analytics_enabled=False, css=css, theme=DiffusersPlatinum) as demo:                                    
    with gr.Tabs() as tabs:
        with gr.TabItem(f"Process", id=0, elem_classes="gradio-tab-item"):  
            with gr.Row():
                with gr.Column(scale=0, visible=False, min_width=350) as col_img2img:
                    files = gr.Files(
                            label="Drag (Select) 1 or more images",
                            file_types=["image"]
                        )
                    uploaded_files = gr.Gallery(label="Your images", visible=False, columns=3, rows=3, height=330)
                    with gr.Column(visible=False) as img2img_controls:
                        img2img_strength_ratio = gr.Slider(                                                        
                        elem_classes="gradio-slider-input",
                        label="Denoising strength ratio",
                        minimum=0.1,
                        maximum=1.0,
                        step=0.01,
                        value=0.7                                
                        )
                        remove_and_reupload = gr.ClearButton(value="Remove and upload new ones", components=files, size="sm")
                        
                with gr.Column(scale=2) as col_prompt:
                    with gr.Row():                                
                        use_input_image = gr.Checkbox(label="Use image as input", value=False)                                
                        clip_skip = gr.Slider(label="CLIP skip", 
                                                value=0,
                                                step=1, 
                                                visible=True,
                                                minimum=0,
                                                maximum=12)   
                    with gr.Row():
                        prompt = gr.Textbox(label="Prompt",
                            info="Try something like 'a photo of a man/woman'. Each new line is parsed as a new prompt",
                            lines=3,
                            placeholder="A photo of a [man/woman]...",
                            )
                    with gr.Row():
                        negative_prompt = gr.Textbox(
                            info="Specify what you doesn't want to see",
                            label="Negative prompt", 
                            placeholder="low quality",
                            lines=3,
                            value="nsfw, lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry",
                        )
            with gr.Row():           
                with gr.Accordion("Image history", open=True) as ac_image_history:
                    with gr.Tabs() as tabs_image_history:                                
                        with gr.Row():
                            with gr.TabItem("Text2Image", id=0, elem_classes="gradio-tab-item") as tab_item_text2img:
                                text2image_gallery = gr.Gallery(label="Images", elem_id="text2text-output-gallery", show_label=False, format="png", preview=True, allow_preview=True, show_download_button=False, interactive=False, columns=4)                                                                               
                            with gr.TabItem("Image2Image", id=1, elem_classes="gradio-tab-item") as tab_item_img2img:
                                image2image_gallery = gr.Gallery(label="Images", elem_id="image2image-output-gallery", show_label=False, format="png", preview=True, allow_preview=True, show_download_button=False, interactive=False, rows=4, columns=4)
                    with gr.Tabs() as tabs_image_history:                                
                        with gr.TabItem(f"Settings", id=0, elem_classes="gradio-tab-item"):
                            with gr.Row(elem_id="settings-row"):
                                with gr.Column(scale=2):                    
                                    with gr.Tabs(elem_id="settings"):
                                         input_settings = get_settings_tab()                   
if __name__ == "__main__":
    demo.launch()

Screenshot

-Demo running on gradio 4, expected layout:

• Bugs on Gradio 5
  1 - Border width
  
  2 - Info text color
  
  3 - Tab element alignment
  
  4 - Vertical tabs
  

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Windows
gradio version: 5.0.1
gradio_client version: 1.4.0

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

aiofiles: 23.2.1
anyio: 4.4.0
fastapi: 0.112.0
ffmpy: 0.4.0
gradio-client==1.4.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.25.2
jinja2: 3.1.3
markupsafe: 2.1.5
numpy: 1.26.3
orjson: 3.10.6
packaging: 24.1
pandas: 2.2.2
pillow: 10.2.0
pydantic: 2.8.2
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.5.6
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.5
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.25.2
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

I can work around it

[abidlabs]

The issues around custom css are expected as the dom can change between versions. But I don't think the issues around the theme variables not being applied are. cc @aliabid94 @hannahblair

[elismasilva]

The issues around custom css are expected as the dom can change between versions. But I don't think the issues around the theme variables not being applied are. cc @aliabid94 @hannahblair

Hi @abidlabs , so my custom css is only for vertical tabs. but border width and info text colour is getting from theme and when i inspect elements in the browser i see the class applied but not with the values that ive provided in theme.

[aliabid94]

I believe the issues above are either resolved or there are open PRs for the issues above:

1. this is actually the result of form_gap_width being set to 0 in the default theme. You can restore the gap between adjacent components by setting this back to 1px in your theme. See gr.themes.Origin for an example.
2. Should be fixed in Fixes component info font size #9651
3. Fixed in Fix Tabs in Rows #9836
4. I don't understand what you meant by this one. Do you mean when there are an excess of tabs at the top, they don't wrap any more?

[elismasilva]

I believe the issues above are either resolved or there are open PRs for the issues above:

1. this is actually the result of form_gap_width being set to 0 in the default theme. You can restore the gap between adjacent components by setting this back to 1px in your theme. See gr.themes.Origin for an example.
2. Should be fixed in Fixes component info font size #9651
3. Fixed in Fix Tabs in Rows #9836
4. I don't understand what you meant by this one. Do you mean when there are an excess of tabs at the top, they don't wrap any more?

I mean that the tabs are not stacking vertically like in the first image (behavior in gradio 4). They are not respecting the css that I applied for them to be vertical. If you run the code example that I provided in both versions of gradio you will be able to better see the problem.

[aliabid94]

Custom css is not guaranteed to work across versions, as the class names internally may changed. Unfortunately you're going to have to rewrite the CSS to get this effect. The logic for tabs has gotten more complex since we now handle overflow situations differently, so you may not be able to get the same effect as before.

[elismasilva]

i will update my gradio version again and test the items 1-3, if i got error again i return here. About item 4 I will try some things in the css to see if I can make the tabs work vertically, I think this could also be a native tab feature.

[elismasilva]

@aliabid94 ive update my gradio to 5.5.0 to test, and now components are freezed, if i click on tabs nothing happens, the galleries dont show images, on previous versios of gradio 5 it was working. I dont know what happened because ive removed my theme to test, removed custom scripts and continues freezed, and dont have any errors on terminal. I did tests until 5.1.0 version is working.

Testing.Gradio.mp4

[elismasilva]

I believe the issues above are either resolved or there are open PRs for the issues above:

1. this is actually the result of form_gap_width being set to 0 in the default theme. You can restore the gap between adjacent components by setting this back to 1px in your theme. See gr.themes.Origin for an example.
2. Should be fixed in Fixes component info font size #9651
3. Fixed in Fix Tabs in Rows #9836
4. I don't understand what you meant by this one. Do you mean when there are an excess of tabs at the top, they don't wrap any more?

I mean that the tabs are not stacking vertically like in the first image (behavior in gradio 4). They are not respecting the css that I applied for them to be vertical. If you run the code example that I provided in both versions of gradio you will be able to better see the problem.

Only item 1 i could test. Others i cant because the problem described on video above.

@abidlabs after we fix this bugs i will be able to test dynamic components on gradio 5. I already have #9595 and #9207 for dynamic errors that i found.