Card HoverOverlay does not extend over entire card if SupportingContent is not supplied

[DC-tvone]

Current behavior

Adding a Card without specifying the SupportingContent results in the hover overlay not fully covering the card

<utu:Card HeaderContent="Elevated card"
          SubHeaderContent="With supporting content"
          AutomationProperties.AutomationId="Elevated_Card"
          Style="{StaticResource ElevatedCardStyle}"> 
</utu:Card>

Code above was taken from the Uno Gallery example

You can clearly see the missing part of the hover overlay. This gets worse if the card is taller.

Expected behavior

The same card with the SupportingContent specified shows the correct hover overlay:

<utu:Card HeaderContent="Elevated card"
          SubHeaderContent="With supporting content"
          SupportingContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
          AutomationProperties.AutomationId="Elevated_Card"
          Style="{StaticResource ElevatedCardStyle}"> 
</utu:Card>

How to reproduce it (as minimally and precisely as possible)

Add a card and do not set the SupportingContent property.
The card should use the default card style, make sure you are not overriding the style for cards.

Environment

Nuget Package:

Package Version(s):

Xamarin.Google.Android.Material {1.11.0.3}
Uno.Extensions.Navigation.WinUI {5.1.3}
Uno.UI.Adapter.Microsoft.Extensi... {5.5.87}
Uno.Resizetizer {1.6.1}
Uno.Extensions.Http.Refit {5.1.3}
Uno.Settings.DevServer {1.1.22}
Uno.Fonts.OpenSans {2.4.5}
Uno.UI.HotDesign {1.1.1}
Uno.Material.WinUI {5.3.1}
Uno.Extensions.Localization.WinUI {5.1.3}
Uno.Extensions.Serialization.Http {5.1.3}
Uno.Extensions.Navigation.Toolki... {5.1.3}
Xamarin.AndroidX.Legacy.Support.V4 {1.0.0.23}
Uno.Sdk.Extras {5.5.11}
Xamarin.AndroidX.Activity {1.9.2.1}
Xamarin.AndroidX.SwipeRefreshLayout {1.1.0.24}
Microsoft.NET.ILLink.Tasks {9.0.0}
Uno.UniversalImageLoader {1.9.37}
Xamarin.AndroidX.Browser {1.8.0.6}
Uno.Toolkit.WinUI {6.3.7}
Xamarin.AndroidX.RecyclerView {1.3.2.8}
Uno.Extensions.Http.WinUI {5.1.3}
Xamarin.AndroidX.AppCompat {1.7.0.3}
SkiaSharp.Views.Uno.WinUI {2.88.9-preview.2.2}
Uno.Dsp.Tasks {1.4.0}
Uno.WinUI.DevServer {5.5.87}
Uno.WinUI {5.5.87}
Uno.Extensions.Serialization.Refit {5.1.3}
SkiaSharp.Skottie {2.88.9-preview.2.2}
Uno.Extensions.Hosting.WinUI {5.1.3}
Microsoft.Extensions.Logging.Con... {9.0.0}
Uno.Extensions.Core.WinUI {5.1.3}
Uno.Extensions.Configuration {5.1.3}
Uno.WinUI.Lottie {5.5.87}
CommunityToolkit.Mvvm {8.3.2}
Uno.Toolkit.WinUI.Material {6.3.7}
Uno.Extensions.Logging.WinUI {5.1.3}
Uno.Extensions.Logging.OSLog {1.7.0}
Microsoft.Windows.SDK.BuildTools {10.0.26100.1742}
Uno.Core.Extensions.Logging.Sing... {4.1.1}
Microsoft.WindowsAppSDK {1.6.241114003}
Microsoft.Windows.Compatibility {9.0.0}
Uno.Extensions.Logging.WebAssemb... {1.7.0}
Uno.WinUI.Runtime.WebAssembly {5.5.87}
Microsoft.NET.Sdk.WebAssembly.Pack {9.0.0}
Uno.Wasm.Bootstrap {9.0.8}
Uno.Wasm.Bootstrap.DevServer {9.0.8}

Affected platform(s):

• iOS
• Android
• WebAssembly
• UWP
• MacOS

Anything else we need to know?

[Xiaoy312]

test setup:

<utu:Card HeaderContent="Elevated card"
		  SubHeaderContent="With supporting content"
		  Style="{StaticResource ElevatedCardStyle}" />
<utu:Card HeaderContent="Elevated card"
		  SubHeaderContent="With supporting content"
		  SupportingContent="Lorem ipsum dolor sit amet."
		  Style="{StaticResource ElevatedCardStyle}" />

visual tree:

StackPanel#TestSut // Actual=667x296, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=[0,20], Opacity=1, Visibility=Visible
    Card // Actual=344x84, Constraints=[0,NaN,344]x[72,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=6, Padding=16, Opacity=1, Visibility=Visible, VisualStates=Normal|
        ElevatedView#ElevatedRoot // Actual=332x72, Constraints=[0,NaN,344]x[72,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=6, Padding=0, Opacity=1, Visibility=Visible
            Grid // Actual=332x72, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                Canvas#PART_ShadowHost // R0C0, Actual=332x72, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                Border#PART_Border // R0C0, Actual=332x72, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                    Grid#GridRoot // Rows=A,A,A,A, Actual=332x72, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                        Border#HoverOverlay // R0-3C0, Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=0, Visibility=Visible
                        Border#FocusedOverlay // R0-3C0, Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=0, Visibility=Visible
                        ContentPresenter#MediaContentPresenter // R0C0, Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Collapsed
                            Image // Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,194], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                        ContentPresenter#HeaderContentPresenter // R1C0, Actual=332x36, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                            TextBlock // Actual=129x36, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="Elevated card", Margin=[16,16,16,0], Padding=0, Opacity=1, Visibility=Visible
                        ContentPresenter#SubHeaderContentPresenter // R2C0, Actual=332x30, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                            TextBlock // Actual=163x30, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="With supporting content", Margin=[16,0,16,16], Padding=0, Opacity=1, Visibility=Visible
                        Ripple // R0-3C0, Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=16, Opacity=1, Visibility=Visible, VisualStates=Normal
                            Grid // Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                                ContentPresenter // R0C0, Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=16, Opacity=1, Visibility=Visible
                                Canvas // R0C0, Actual=332x66, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                                    Ellipse#ClickEllipse // Actual=332x332, Constraints=[0,332,∞]x[0,332,∞], HV=Stretch/Stretch, Fill=#FFE6E1E5*.12, Margin=0, Opacity=0, Visibility=Visible
                        ContentPresenter#SupportingContentPresenter // R3C0, Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Collapsed
                            TextBlock // Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="Uno.Toolkit.Samples.Entities.Sample", Margin=[16,0,16,16], Padding=0, Opacity=1, Visibility=Visible
                        ContentPresenter#IconsContentPresenter // R3C0, Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Collapsed
    Card // Actual=344x128, Constraints=[0,NaN,344]x[72,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=6, Padding=16, Opacity=1, Visibility=Visible, VisualStates=Normal|
        ElevatedView#ElevatedRoot // Actual=332x116, Constraints=[0,NaN,344]x[72,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=6, Padding=0, Opacity=1, Visibility=Visible
            Grid // Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                Canvas#PART_ShadowHost // R0C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                Border#PART_Border // R0C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                    Grid#GridRoot // Rows=A,A,A,A, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                        Border#HoverOverlay // R0-3C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=0, Visibility=Visible
                        Border#FocusedOverlay // R0-3C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=0, Visibility=Visible
                        ContentPresenter#MediaContentPresenter // R0C0, Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Collapsed
                            Image // Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,194], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                        ContentPresenter#HeaderContentPresenter // R1C0, Actual=332x36, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                            TextBlock // Actual=129x36, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="Elevated card", Margin=[16,16,16,0], Padding=0, Opacity=1, Visibility=Visible
                        ContentPresenter#SubHeaderContentPresenter // R2C0, Actual=332x30, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                            TextBlock // Actual=163x30, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="With supporting content", Margin=[16,0,16,16], Padding=0, Opacity=1, Visibility=Visible
                        Ripple // R0-3C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=16, Opacity=1, Visibility=Visible, VisualStates=Normal
                            Grid // Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=12, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                                ContentPresenter // R0C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=16, Opacity=1, Visibility=Visible
                                Canvas // R0C0, Actual=332x116, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Margin=0, Opacity=1, Visibility=Visible
                                    Ellipse#ClickEllipse // Actual=332x332, Constraints=[0,332,∞]x[0,332,∞], HV=Stretch/Stretch, Fill=#FFE6E1E5*.12, Margin=0, Opacity=0, Visibility=Visible
                        ContentPresenter#SupportingContentPresenter // R3C0, Actual=332x50, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Visible
                            TextBlock // Actual=299x50, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.", Margin=[16,0,16,16], Padding=0, Opacity=1, Visibility=Visible
                        ContentPresenter#IconsContentPresenter // R3C0, Actual=0x0, Constraints=[0,NaN,∞]x[0,NaN,∞], HV=Stretch/Stretch, CornerRadius=0, Margin=0, Padding=0, Opacity=1, Visibility=Collapsed

^ sum of (HeaderContentPresenter, SubHeaderContentPresenter, SupportingContentPresenter) heights should add up to the height of GridRoot:
1. 1st: 36+30+00 = 66 (which is also height of various overlays) != 72 (height of RootGrid)
2. 2nd: 36+30+50 = 116 == 116 // ok
The 72 is from the ElevatedView's MinHeight. But, for some reason, some children of RootGrid, despite having Grid.RowSpan=4 and VerticalAlignment=Stretch, don't vertically stretch to match their parent RootGrid's height.

[Xiaoy312]

@DC-tvone as a temporary workaround, you can explicit set the MinHeight of Card to a much lower value, either on the card itself or by overriding its style.

[Xiaoy312]

@MartinZikmund @carldebilly does this look like a measure/arrange issue on Grid?
fyi, the style is located at: https://github.com/unoplatform/uno.toolkit.ui/blob/6.3.5/src/library/Uno.Toolkit.Material/Styles/Controls/v2/Card.xaml#L411