How can I prevent window titles from overlapping in a Maui app with shell navigation and modals?

Question

I'm developing a Maui app with shell navigation and modals, and I'm encountering an issue with overlapping window titles. When navigating from the main page to another page using shell navigation, a back button appears, causing the window title to shift slightly to the right. However, when I push a modal on that page, the window title on the modal page remains in its original position. This results in both window titles overlapping and creating a visually awkward effect.

I've attached images for reference

MainPage:

Navigated to another page using shell navigation:

Pushed Modal Page:

Any insights, code snippets, or suggestions would be immensely helpful. Thank you!

Answer 1

it is a Tab app. First I am in the CartsView then I click a button that shell navigates

  public async Task NavigateAsync<T>(ShellNavigationQueryParameters? param) where T : Page
  {
      try
      {
          if (param is null)
              await Shell.Current.GoToAsync(typeof(T).Name);
          else
              await Shell.Current.GoToAsync(typeof(T).Name, param);
      }
      catch (Exception ex)
      {
          throw new InvalidOperationException($"Exception in Navigation: {ex.Message}");
      }
  }

to ReturnCartView. After that in the ReturnCartView I pushed a modal page (using PushModalAsync) which is PartsInformationView.

Here is my Appshell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SmartCart.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SmartCart"
    xmlns:views="clr-namespace:SmartCart.Views"
    Title="Smart Cart">
    <TabBar>
        <ShellContent 
             x:Name="HomeView"
             Title="Home"
             ContentTemplate="{DataTemplate views:HomeView}"
             Route="HomeView"
             Icon="home.png" />
        
        <ShellContent 
              x:Name="Cart"
              Title="Carts"
              ContentTemplate="{DataTemplate views:CartsView}"
              Route="CartsView"
              Icon="cart.png" />
    </TabBar>
    <Shell.ToolbarItems>
        <ToolbarItem Text="Settings" 
                 Order="Secondary"  
                 Clicked="ToolbarItem_Clicked" />
    </Shell.ToolbarItems>
</Shell>

The <Shell.TitleView> just changes the above circled title and not the WindowTitle

I was able to remove the Back button in the ReturnCartView using this it fixes the visual effect

  <Shell.BackButtonBehavior>
      <BackButtonBehavior IsVisible="False" />
  </Shell.BackButtonBehavior>

Or I could just remove the title from the Shell then it does not overlap