Attribute Margin.Dense in the fields with Variant.Outlined used inside the Dialogs, breaks the label display

[Hiden46]

Things to check

• [X] I have searched the existing issues for this bug
• [X] To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Component, Other

Component name

MudDialog

What happened?

Using the Margin.Dense and the Variant.Outline attribute for components breaks the label display when used in Dialogs

Expected behavior

The label should always be visible

Reproduction link

https://try.mudblazor.com/snippet/mkwSOhcpSyarwnUU

Reproduction steps

1. Use dialog
2. Add a MudTextFieldinside <DialogContent>
3. Use the attribute Margin="Margin.Dense" and Variant="Variant.Outlined"
4. Start the project and focus on the component

Relevant log output

No response

Version (bug)

7.4.0

Version (working)

No response

What browsers are you seeing the problem on?

Chrome, Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Hiden46]

I have currently fixed it by overriding the class in the css like this:

.mud-input-control.mud-input-control-margin-dense {
    margin-top: 6px;
}

The default value is margin-top: 3px;

[danielchalmers]

@ralvarezing , could this be related to #8540?

[ralvarezing]

I'll take a look and come back to you

[ralvarezing]

For what I could see, the cut is caused by #8540 partially. Yes, the label is higher than the margin it has defined on top, and the cut is finally caused by the DialogContent due to the overflow:auto.

It should be an easy fix adding the missing margin to the text field, and also the margin has to be added to the .mud-input-control, instead of the .mud-input div (Something I didn't saw at the moment).

I'll be working on that and probablly open a PR late today

[ralvarezing]

For what I could see, the cut is caused by #8540 partially. Yes, the label is higher than the margin it has defined on top, and the cut is finally caused by the DialogContent due to the overflow:auto.

It should be an easy fix adding the missing margin to the text field, and also the margin has to be added to the .mud-input-control, instead of the .mud-input div (Something I didn't saw at the moment).

I'll be working on that and probablly open a PR late today

Well, yesterday wasn't possible to open a PR, but look deeper into this issue and noted that #8540 was not the root of this.

A top margin is required to be added to the dense version (now it's at 3px) so the label fits in. A margin between 6px and 8px should do the trick (8 would be half the non dense version). Only this would solve this issue but will add a little margin to the top, even when no lavel is set, that #8540 was trying to avoid. The solution to this last bit is not quite direct, but if I can, today will do some testing if can be avoided.