Fluent Wizard is not being displayed correctly when stepper position is Top

[Dazfl]

I am trying to use the FluentWizard control in my Blazor Server 8 application and it isn't being displayed correctly. I am using Tailwind CSS with my project, but I have not applied any styles to the control, or surrounding container elements. My code is as follows:

    <div>
        <FluentWizard 
            StepperPosition="StepperPosition.Top" 
            DisplayStepNumber="WizardStepStatus.Current" 
            Border="WizardBorder.Inside">
            <Steps>
                <FluentWizardStep Label="Start">
                    Start
                </FluentWizardStep>
                <FluentWizardStep Label="Step 1">
                    Step 1
                </FluentWizardStep>
                <FluentWizardStep Label="Step 2">
                    Step 2
                </FluentWizardStep>
                <FluentWizardStep Label="Step 3">
                    Step 3
                </FluentWizardStep>
                <FluentWizardStep Label="Step 4">
                    Step 4
                </FluentWizardStep>
                <FluentWizardStep Label="Complete">
                    Complete
                </FluentWizardStep>
            </Steps>
        </FluentWizard>
    </div>

This results in the steps being rendered as below:

When I change the position to LEFT, it mostly renders correctly. The numbers in the circles are slightly off-centre.

Has anyone had this same issue?

[Christophe Gerbier]

Hello,

Same code gives this on my side :

or this if I expand the container :

No other CSS involved, however.

Regards,
Christophe

[Dazfl]

I found the issue. By default, Tailwind CSS was setting the default style for SVGs as follows:

svg {
   display: block;
   vertical-align: middle;
}

I had to overwrite those styles in my site.css with the following:

svg {
   display: unset;
   vertical-align: unset;
}

... and that did the trick. The steps are displayed correctly now.

Hope this helps anyone else experiencing the same issue.