microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.23k stars 294 forks source link

fix: AppBar missing some top padding on the popover for smaller views #1973

Closed StephenOTT closed 2 weeks ago

StephenOTT commented 2 weeks ago

šŸ› Bug Report

If you load app bar in place of the traditional nav menu and go to XS sizes you get:

image

The top of the window is cut off.

šŸ’» Repro or Code Sample

Where traditional navMenu would be placed:

                <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%" HorizontalGap="2">
                    @* <NavMenu/> *@

                    <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center" Width="70px">
                        <FluentAppBar PopoverShowSearch="true" Class="pl-5" Style="height: 100%; max-height: 70dvh">
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                            <FluentAppBarItem IconRest="ResourcesIcon()" IconActive="ResourcesIcon(true)" Text="Some Title"/>
                        </FluentAppBar>
                    </FluentStack>
...

šŸ¤” Expected Behavior

A simple quick fix is to add some top padding to the popover's fluent-anchored-region:

image image

using 4.7.1