fix: Unexpected width behaviour in FluentCombobox

[Daniel]

🐛 Bug Report

When setting the width of the FluentCombobox to 100% i think it gets a wrong value for the min-width.

💻 Repro or Code Sample

<FluentGrid style="width:300px; background-color:lightgreen">
    <FluentGridItem md="4">
        <p>Option 1:</p>
    </FluentGridItem>
    <FluentGridItem md="8">
        <FluentCombobox Id="combobox-with-all-disabled" @bind-Value="@comboboxValue" TOption="string" Width="100%">
            <FluentOption>Option 1.1</FluentOption>
        </FluentCombobox>
    </FluentGridItem>

    <FluentGridItem md="4">
        <p>Option 2:</p>
    </FluentGridItem>
    <FluentGridItem md="8">
        <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Width="100%">
            <FluentCheckbox @bind-Value="isChecked" />
            <FluentCombobox Id="combobox-with-all-disabled" @bind-Value="@comboboxValue" TOption="string" Width="100%">
                <FluentOption>Option 2.1</FluentOption>
            </FluentCombobox>
        </FluentStack>
    </FluentGridItem>
</FluentGrid>


@code {
    string? comboboxValue = "";
    bool isChecked = false;
}

🤔 Expected Behavior

The right border of the second combobox should align to the first combobox.

😯 Current Behavior

See screenshot

💁 Possible Solution

Correctly handling the min-width.
When overwriting the min-width it works like expected:

            <FluentCombobox Id="combobox-with-all-disabled" @bind-Value="@comboboxValue" TOption="string" Width="100%" Style="min-width:100px">
                <FluentOption>Option 2.1</FluentOption>
            </FluentCombobox>

I think a lower min-width then the given 250px would be a good idea.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Tested with Chrome and Firefox
• .NET and Fluent UI Blazor library Version 8.0.2 and 4.4.1

[Vincent Baaij]

We settled on the min-width of 250px. If you want to have it smaller, there is the option to change it with the Style parameter. Don't really see this as an issue.