FluentUI Dialogs and FluentStack Not Displaying Horizontally

I am very new to Blazor and FluentUI (being much more familiar with Desktop and WPF). I am using FluentUI components to attempt to design a login dialog, for example. The dialog opens correctly, but the individual elements of the dialog display vertically instead of horizontally:

My relevant code for creating the dialog is:

DialogParameters dialogParameters = new(){    Title = "Login to Site",    PrimaryAction = "Ok",    PrimaryActionEnabled = true,    SecondaryAction = "Cancel",    SecondaryActionEnabled = true,    PreventDismissOnOverlayClick = true,    Width = "500px",    TrapFocus = true,    Modal = true,    PreventScroll = true};IDialogReference loginDialog = await DialogService.ShowDialogAsync<LoginDialog>(LoginRequest, dialogParameters);DialogResult? result = await loginDialog.Result;

and my LoginDialog.razor component is:

implements IDialogContentComponent<LoginRequest><!--<FluentDialogHeader ShowDismiss="true"><FluentStack VerticalAlignment="VerticalAlignment.Center" Orientation="Orientation.Horizontal"><FluentIcon Value="@(new Icons.Regular.Size24.WindowFingerprint())" /><FluentLabel Typo="Typography.PaneHeader">            @Dialog.Instance.Parameters.Title</FluentLabel></FluentStack></FluentDialogHeader>--><FluentDialogBody><p>        Welcome! Please enter your        details below in order to login.</p><FluentTextField @bind-value="@Content.UserName">Username:</FluentTextField><FluentTextField TextFieldType="TextFieldType.Password" @bind-value="@Content.Password">Password:</FluentTextField></FluentDialogBody>@code {    [Parameter] public LoginRequest Content { get; set; } = new(string.Empty, string.Empty);    [CascadingParameter] FluentDialog Dialog { get; set; } = default!;}

Whether or not I uncomment that code for a custom header and whether or not I include the 'Orientation="Orientation.Horizontal"', I get exactly the same result. The dialog functionality is great, but the "X" and the "Login to Site" are stacked vertically instead of horizontally.

The same thing happens if I try to create a header in my MainLayout.razor using FluentLayout - header items are stacked vertically instead of horizontally.

All I can think is that this is some sort of CSS issue (which is somewhat out of my area of familiarity). I've been through "Getting Started" at FluentUI, but have either missed something there or have something configured incorrectly. I did used to have some SyncFusion components installed in the same project and have since removed them, but have made sure that I have removed references to the SF themes.

This is a WebAssembly project running on https and compiled using .NET 8 in JB Rider.