Filament•10mo ago

Unwanted top padding on Tabs & Wizards in Minimal Theme

@Zep Fietje I'm noticing an odd issue with tabs and wizard steps when using the Minimal Theme. When you change tabs or move to the next step in the wizard, some padding or margin from the previous step is getting added to the top of the next tab or wizard. The problem seems to be the use of the invisible class. Changing invisible to hidden seems to fix the problem. I've included some screenshots of the wizard in my project so you can see the extra padding/margin that is being added. I added a top border and some additional padding to each step so you can see the issue more clearly.

Solution:

Thanks @Zep Fietje this has been fixed as of v3.2.2

Jump to solution

4 Replies

Zep Fietje•10mo ago

Thanks for reporting, @neil.keena! I can't reproduce the issue though. Are you sure this happens with just the Minimal Theme without your tweaks as well? If it's caused by your custom styling, be sure to add :not(.invisible). The invisible class is required in core for a couple of reasons Let me know if you do think it's caused by the theme though, then I can have another look

neil.keenaOP•10mo ago

Hey! Seems like it wasn't the invisible class. Sorry. I did confirm by disabling the minimal theme that everything works. The problem seems to be a 1.5 rem top margin that is applied to "contained" tabs. Here is the CSS that is being rendered in the theme.css. This is not my customization. I think it's either Filament core or Minimal Theme styling?

.fi-fo-tabs.fi-contained .fi-fo-tabs-tab:not(.fi-fo-wizard-header-step-indicator){

    margin-top: 1.5rem;

    padding: 0px;
}

.fi-fo-tabs.fi-contained .fi-fo-tabs-tab:not(.fi-fo-wizard-header-step-indicator){

    margin-top: 1.5rem;

    padding: 0px;
}

When I explicitly use ->contained(false) on my tabs, I no longer get the extra margin. Should that be necessary? That doesn't seem right

Zep Fietje•10mo ago

Hmm the top margin is only applied on visible tabs in the theme Please DM me with the exact version of the theme you have installed the .fi-fo-wizard-header-step-indicator part here is weird as in the theme codebase it's .invisible

Solution

neil.keena•10mo ago

Thanks @Zep Fietje this has been fixed as of v3.2.2

Gaming

Programming

Unwanted top padding on Tabs & Wizards in Minimal Theme