The calendar component doesn't display properly in the card component

[Seanxwy]

🐛 Bug Report

The calendar component doesn't display properly in the card component

💻 Repro or Code Sample

<FluentCard Class="mb-3">
    <FluentEditForm Model="@search">
        <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
            <div style="display:flex" class="me-2">
                <FluentInputLabel Label="Username" class="me-2 fluent-input-label"></FluentInputLabel>
                <FluentTextField Name="Username" @bind-Value="search.Username" Appearance="FluentInputAppearance.Filled" />
            </div>
            <div style="display:flex" class="me-2">
                <FluentInputLabel Label="Email" class="me-2 fluent-input-label"></FluentInputLabel>
                <FluentTextField Name="Email" @bind-Value="search.Email" Appearance="FluentInputAppearance.Filled" />
            </div>
            <div style="display:flex" class="me-2">
                <FluentInputLabel Label="Mobile" class="me-2 fluent-input-label"></FluentInputLabel>
                <FluentTextField Name="Mobile" @bind-Value="search.Mobile" Appearance="FluentInputAppearance.Filled" />
            </div>
            <div style="display:flex" class="me-2">
                <FluentInputLabel Label="Start Date" class="me-2 fluent-input-label"></FluentInputLabel>
                <FluentDatePicker AriaLabel="To" @bind-Value="@search.StartTime" />
            </div>
            <div style="display:flex" class="me-2">
                <FluentInputLabel Label="End Date" class="me-2 fluent-input-label"></FluentInputLabel>
                <FluentDatePicker AriaLabel="To" @bind-Value="@search.EndTime" />
            </div>
            <div>
                <FluentButton Appearance="Appearance.Accent">Search</FluentButton>
                <FluentButton>Reset</FluentButton>
            </div>
        </FluentStack>
    </FluentEditForm>
</FluentCard>

Repository code

https://github.com/Seanxwy/FluentBlazorApp1/blob/master/FluentBlazorApp1/FluentBlazorApp1.Client/Pages/Home.razor

🤔 Expected Behavior

Normal display

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[vnbaaij]

https://fluentui-blazor.net/Card#arearestrictedexampl