fix: Custom FluentTab Header is not displayed in FluentTabs

[jfadiga]

🐛 Bug Report

When adding new FluentTabs component, if the Fluent Tab Content is shorter than Fluent Tab Header, Fluent Tab Header is not displayed, It just shows "+ {number of tab headers}".

💻 Repro or Code Sample

<FluentTabs ActiveTabId="tab-1">
    <FluentTab Id="tab-1">
        <Header>
            First Tab Header
        </Header>
        <Content>
            test testtesttesttest testtest test test
        </Content>
    </FluentTab>
</FluentTabs>

<FluentTabs ActiveTabId="tab-2">
    <FluentTab Id="tab-2">
        <Header>
            First Tab Header
        </Header>
        <Content>
            test
        </Content>
    </FluentTab>
</FluentTabs>

🤔 Expected Behavior

Fluent Tab Headers are displayed no matter the Fluent Tab Content length.

😯 Current Behavior

Fluent Tab Headers are not displayed when Fluent Tab Content is shorter than Fluent Tab Header.

💁 Possible Solution

FluentTabs Width could be set to 100 % of parent width so that Fluent Tab Header can fit inside FluentTabs.

🔦 Context

It was difficult to understand why one page displayed Fluent Tab Headers correctly and the other did not. It affects the perception when users uses the application as if it is not finished.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: latest Microsoft Edge
• .NET and Fluent UI Blazor library Version 8.0.2 and 4.11.9

[dvoituron]

We need more context, because your example shows a correct UI.

https://try.fluentui-blazor.net/snippet/QOwTupcxyIFkEyNs

[vnbaaij]

As @dvoituron mentioned already, we cant reproduce this. We are closing this for now. If you supply reproduction code, we can re-open and investigate further.