fix: different padding when using MaxAutoHeight in FluentAutocomplete

[MarvinKlein1508]

🐛 Bug Report

Not sure if this intentional but the input field gets extra padding when using MaxAutoHeight although it is not necessary yet.

💻 Repro or Code Sample

https://www.fluentui-blazor.net/Autocomplete

🤔 Expected Behavior

I would expect the component to grow in height only when necessary

😯 Current Behavior

The component grows in height even if there is enough space to display the current selected items

🔦 Context

When using the FluentAutocomplete component with MaxAutoHeight in combination with other components then the component could be larger be default then all other inputs.

[dvoituron]

Yes, it's in the design because the internal workings are not the same.
In practice, on a website, this is not something that will be visible because you don't switch from one mode to another.

[MarvinKlein1508]

@dvoituron it is visible when you have a FluentAutocomplete right next to any other default fluent input:

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

The fix for this is quite simple removing this 3 lines:

fluentui-blazor/src/Core/Components/List/FluentAutocomplete.razor.css

Line 51 in 5b31b9f

.fluent-autocomplete-multiselect[auto-height] ::deep fluent-text-field::part(control) {

I cannot notice any difference in the behaviour when doing so. Let me know what you think and I will create a PR for this :)

[dvoituron]

Yes, of course. You can create a PR to fix this. But I don't think it will be that simple :-)
I just tried your suggestion and it doesn't completely solve the problem. I look forward to your suggestion.

[MarvinKlein1508]

@dvoituron which problem do you mean exactly? This should just prevent that the height grows in the default state. It will grow when enough items have been added. Or am I missing some key detail here? :)

[dvoituron]

@dvoituron which problem do you mean exactly? This should just prevent that the height grows in the default state. It will grow when enough items have been added. Or am I missing some key detail here? :)

No change: an extra space is still there and the space below the "tag" is not the same with vs without the Auto Height (without this style)

[MarvinKlein1508]

Ah I see. When I remove this line, everything else inside the control is shiftig as well for I guess 2px. I will take a look on it :)

[MarvinKlein1508]

Can you assign me, so I can see the issue in my inbox. I'm on vacation for the next 2 weeks so I will probably pick it up later then.

[MarvinKlein1508]

@dvoituron with some CSS magic I get this:

It still changes height underneith for a few pixels when enabling MaxAutoHeight. This is due to the required padding for the tags so they won't show up all sticked together. But in general the visible stuff doesn't change anymore.

They way I did this was by removing the 3 lines from earlier and updating the CSS above to:

.fluent-autocomplete-multiselect[auto-height] ::deep fluent-text-field::part(root) {
    min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    height: auto;
    padding: 4px 0;
}