AppBar label size/spacing

[gotmoo]

Is there a way to allow for slightly more space for the label text in the AppBar or else wrapping of the label? When I use "New Request" as the label it's truncated to "New Req...". I really like the look of the AppBar for my app, and perhaps with slightly increased spacing around the icons it could fit the extra characters.

[rpodevns]

Try overriding the fluent-appbar-item css class.

<FluentAppBar Orientation="@Orientation.Vertical" Style="width:130px; height: 300px">

    <FluentAppBarItem Href="/"
                        IconRest="new Icons.Filled.Size24.AppFolder()"
                        Text="New Request1" />

    <FluentAppBarItem Href="/"
                        IconRest="new Icons.Filled.Size24.AppFolder()"
                        Text="New Request2" />
</FluentAppBar>

<style>
    .fluent-appbar-item {
        width: fit-content!important;
        height: 90px!important;
    }
</style>

[gotmoo]

Amazing! sometimes there's just a simple answer 😄

With a bit of tweaking, I found 5.5em to work well for my setup, plus it sizes along with the text itself!

.fluent-appbar-item {
    width: 5.5em!important;
    height: 4.5em!important;
}