From 51e21dd86a27d4060c73403214375ab9c784ad1d Mon Sep 17 00:00:00 2001
From: Carlos Zamora <carlos.zamora@microsoft.com>
Date: Tue, 21 Jan 2025 18:22:20 -0800
Subject: [PATCH] [Windows 10] Fix layout in New Tab Menu page (#18424)

There's an existing WinUI bug where a nested Grid has it's star-sizing
ignored on Windows 10. This resulted in the New Tab Menu page looking
weird on Windows 10. This PR fixes the layout issue by applying a max
width to the first column, which will be clipped as necessary to make
space for the second column.

Part of #18281

## Validation Steps Performed
Validated the page looks good on Windows 10 and Windows 11, even after
resizing the window.
---
 .../TerminalSettingsEditor/NewTabMenu.xaml    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml b/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
index eba2e6e21f7..018a00d532d 100644
--- a/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
+++ b/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
@@ -31,7 +31,17 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
+                                <!--
+                                    BODGY: We want two columns of content:
+                                    1. the identifier (e.g. profile name), aligned left
+                                    2. the buttons (e.g. reorder, delete), aligned right
+                                    There's a bug in WinUI 2 for Windows 10 where these nested columns are treated as "auto" instead
+                                    of *-sized. To work around this, we can set the width of the first column's content to
+                                    StandardControlMaxWidth. The first column will be clipped as necessary to make space for the second column,
+                                    resulting in the desired layout.
+                                -->
                                 <ContentPresenter Grid.Column="0"
+                                                  Width="{StaticResource StandardControlMaxWidth}"
                                                   Content="{TemplateBinding Content}" />
                                 <StackPanel Grid.Column="1"
                                             Orientation="Horizontal"
@@ -127,7 +137,17 @@
                         <ColumnDefinition Width="*" />
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
+                    <!--
+                        BODGY: We want two columns of content:
+                        1. the identifier (e.g. profile name), aligned left
+                        2. the buttons (e.g. reorder, delete), aligned right
+                        There's a bug in WinUI 2 for Windows 10 where these nested columns are treated as "auto" instead
+                        of *-sized. To work around this, we can set the width of the first column's content to
+                        StandardControlMaxWidth. The first column will be clipped as necessary to make space for the second column,
+                        resulting in the desired layout.
+                    -->
                     <StackPanel Grid.Column="0"
+                                Width="{StaticResource StandardControlMaxWidth}"
                                 Orientation="Horizontal">
                         <IconSourceElement Width="16"
                                            Height="16"