Skip to content

Commit

Permalink
[Windows 10] Fix layout in New Tab Menu page (#18424)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
carlos-zamora authored Jan 22, 2025
1 parent 3e969d5 commit 51e21dd
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 51e21dd

Please sign in to comment.