fix: data picker calendar popup getting cut off about fluentui-blazor

[vnbaaij]

Isn't that just a case of the AreaRestricted: https://fluentui-blazor.net/Card#arearestrictedexampl

[swilkodev]

@vnbaaij Yes your right.... I forgot about that setting, that fixed it. Thanks for the prompt reply.

[dvoituron]

As Vincent explained, you need to add AreaRestricted="false" to solve your problem.

Example:

<FluentCard Style="width: 200px; height: 200px;">
    <h3>Hello</h3>
</FluentCard>
<FluentCard Style="margin: 16px 0; padding: 16px; width: 1000px; height: 500px;" AreaRestricted="false">  <!-- 👈 -->
    <FluentDatePicker Label="Date1" />
    <FluentTabs ActiveTabId="tab-1">
        <FluentTab Label="Tab-1" Id="tab-1">
            <FluentDatePicker Label="Date2"/>
        </FluentTab>
        <FluentTab Label="Tab-2" Id="tab-2">
            <div>
                <strong>Select</strong>
                <FluentRadioGroup TValue="string">
                    <FluentRadio Value="@("One")">One</FluentRadio>
                    <FluentRadio Value="@("Two")">Two</FluentRadio>
                </FluentRadioGroup>
                <FluentDatePicker Label="Date3"/>
            </div>
        </FluentTab>
    </FluentTabs>
</FluentCard>