TitleBar Content Overlapping with Traffic Light Buttons on Latest macOS Version #33136
Description
Description
After updating to the latest macOS version, the system traffic light window buttons (close, minimize, maximize) have increased in size and spacing. This UI change causes the TitleBar’s leading icon/content in our application to overlap with the window controls.
Steps to Reproduce
public partial class MainPage : ContentPage
{
public MainPage()
{
// Create TitleBar
var titleBar = new TitleBar
{
Title = "Maui App",
Subtitle = "Hello, World!",
ForegroundColor = Colors.Red,
HeightRequest = 48
};
titleBar.LeadingContent = new Image {Source = "dotnet_bot.png", HeightRequest = 24};
// Set the TitleBar on the current Window when this page appears
this.Loaded += (sender, e) =>
{
if (Window != null)
{
Window.TitleBar = titleBar;
}
};
// Create the page content with a Label
Content = new VerticalStackLayout
{
Spacing = 25,
Padding = new Thickness(30),
VerticalOptions = LayoutOptions.Center,
Children =
{
new Label
{
Text = "TitleBar should be aligned to the left in fullscreen mode",
AutomationId = "TitleBarAlignmentLabel",
FontSize = 32,
HorizontalOptions = LayoutOptions.Center
},
}
};
}
}
- Paste the above code in MainPage.xaml.cs
2.Run the sample in Latest mac version
Expected Behavior
TitleBar content should be positioned with enough left padding so it does not overlap with the system window buttons, regardless of macOS updates.
Actual Behavior
TitleBar’s leading icon/content overlaps with the enlarged traffic light buttons in the latest macOS version.
Link to public reproduction project repository
No response
Version with bug
10.0.11
Is this a regression from previous behavior?
Yes, this used to work in .NET MAUI
Last version that worked well
No response
Affected platforms
macOS
Affected platform versions
Tahoe 26.1
Did you find any workaround?
No response