From ee70b3cecad8616f8eaf5a343860f1d1222aa9bd Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Wed, 1 Apr 2026 07:46:06 +0200
Subject: [PATCH] Fix for CmdPal settings page offset (#46568)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request

This is a weird bug in WinUI where a child panel gets a weird offset
when wrapped in a `ScrollViewer` and if it has a `MaxWidth`. The
solution is to wrap it with another panel 🤷

Top: with fix
Bottom: 0.98.1
<img width="1351" height="1259" alt="image"
src="https://github.com/user-attachments/assets/076ac947-58d1-4031-8be3-300a8511a636"
/>


<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #46238
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jiří Polášek <me@jiripolasek.com>
---
 .../SettingsXAML/Views/CmdPalPage.xaml        | 385 +++++++++---------
 1 file changed, 194 insertions(+), 191 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml
index e30eeb5742..efdceeb7fa 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/CmdPalPage.xaml
@@ -13,208 +13,211 @@
     mc:Ignorable="d">
     <Grid>
         <ScrollViewer AutomationProperties.AutomationId="PageScrollViewer">
-            <Grid
-                MaxWidth="1000"
-                Padding="16,0,16,0"
-                VerticalAlignment="Top"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                BorderThickness="1"
-                CornerRadius="16"
-                RowSpacing="8">
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <tkcontrols:OpacityMaskView
-                    Margin="-16,0,-16,0"
-                    HorizontalAlignment="Stretch"
-                    HorizontalContentAlignment="Stretch">
-                    <tkcontrols:OpacityMaskView.OpacityMask>
-                        <Rectangle>
-                            <Rectangle.Fill>
-                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
-                                    <GradientStop Offset="0.50" Color="Black" />
-                                    <GradientStop Offset="0.75" Color="#80000000" />
-                                    <GradientStop Offset="0.95" Color="Transparent" />
-                                </LinearGradientBrush>
-                            </Rectangle.Fill>
-                        </Rectangle>
-                    </tkcontrols:OpacityMaskView.OpacityMask>
-                    <Grid MaxHeight="560">
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="*" />
-                        </Grid.RowDefinitions>
-                        <Grid.Background>
-                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
-                                <!--  Top-left: light cyan/blue  -->
-                                <GradientStop Offset="0.0" Color="#5FAFC9" />
-
-                                <!--  Mid transition  -->
-                                <GradientStop Offset="0.45" Color="#3E7FB0" />
-
-                                <!--  Bottom-right: deep blue  -->
-                                <GradientStop Offset="1.0" Color="#2C3E8F" />
-                            </LinearGradientBrush>
-                        </Grid.Background>
-                        <TextBlock
-                            x:Uid="CmdPal_HeroTitle"
-                            Margin="0,24,0,12"
-                            HorizontalAlignment="Center"
-                            FontSize="36"
-                            FontWeight="Bold">
-                            <TextBlock.Foreground>
-                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
-                                    <GradientStop Offset="0.0" Color="#FFB9EBFF" />
-                                    <GradientStop Offset="0.49" Color="#FF86CBFF" />
-                                    <GradientStop Offset="1.0" Color="#FFA1E7FF" />
-                                </LinearGradientBrush>
-                            </TextBlock.Foreground>
-                        </TextBlock>
-                        <TextBlock
-                            Grid.Row="1"
-                            HorizontalAlignment="Center"
-                            Foreground="White"
-                            TextAlignment="Center"
-                            TextWrapping="Wrap">
-                            <Run x:Uid="CmdPal_Description" />
-                            <Hyperlink NavigateUri="">
-                                <Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
-                            </Hyperlink>
-                        </TextBlock>
-                        <Image
-                            Grid.Row="2"
-                            Margin="0,16,0,0"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Top"
-                            Source="/Assets/Settings/Modules/CmdPal.png"
-                            Stretch="Uniform" />
-                    </Grid>
-                </tkcontrols:OpacityMaskView>
-
+            <!--  Wrapper Grid required to work around WinUI ScrollViewer + MaxWidth layout offset issue. Do not remove.  -->
+            <Grid>
                 <Grid
-                    Grid.Row="1"
-                    Margin="0,-12,0,24"
-                    ColumnSpacing="32"
+                    MaxWidth="{StaticResource PageMaxWidth}"
+                    Padding="16,0,16,0"
+                    VerticalAlignment="Top"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="16"
                     RowSpacing="8">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
-                    <FontIcon
-                        HorizontalAlignment="Center"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        Glyph="&#xEB3B;" />
-                    <TextBlock
-                        Grid.Row="1"
-                        HorizontalAlignment="Center"
-                        TextAlignment="Center"
-                        TextWrapping="Wrap">
-                        <Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
-                        <Run
-                            x:Uid="CmdPal_ExtensibleDescription"
-                            FontSize="12"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
-                    </TextBlock>
+                    <tkcontrols:OpacityMaskView
+                        Margin="-16,0,-16,0"
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch">
+                        <tkcontrols:OpacityMaskView.OpacityMask>
+                            <Rectangle>
+                                <Rectangle.Fill>
+                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                                        <GradientStop Offset="0.50" Color="Black" />
+                                        <GradientStop Offset="0.75" Color="#80000000" />
+                                        <GradientStop Offset="0.95" Color="Transparent" />
+                                    </LinearGradientBrush>
+                                </Rectangle.Fill>
+                            </Rectangle>
+                        </tkcontrols:OpacityMaskView.OpacityMask>
+                        <Grid MaxHeight="560">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Grid.Background>
+                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                                    <!--  Top-left: light cyan/blue  -->
+                                    <GradientStop Offset="0.0" Color="#5FAFC9" />
 
-                    <FontIcon
-                        Grid.Column="1"
-                        HorizontalAlignment="Center"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        Glyph="&#xE945;" />
-                    <TextBlock
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Center"
-                        TextAlignment="Center"
-                        TextWrapping="Wrap">
-                        <Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
-                        <Run
-                            x:Uid="CmdPal_FastDescription"
-                            FontSize="12"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
-                    </TextBlock>
+                                    <!--  Mid transition  -->
+                                    <GradientStop Offset="0.45" Color="#3E7FB0" />
 
-                    <FontIcon
-                        Grid.Column="2"
-                        HorizontalAlignment="Center"
-                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                        Glyph="&#xE790;" />
-                    <TextBlock
+                                    <!--  Bottom-right: deep blue  -->
+                                    <GradientStop Offset="1.0" Color="#2C3E8F" />
+                                </LinearGradientBrush>
+                            </Grid.Background>
+                            <TextBlock
+                                x:Uid="CmdPal_HeroTitle"
+                                Margin="0,24,0,12"
+                                HorizontalAlignment="Center"
+                                FontSize="36"
+                                FontWeight="Bold">
+                                <TextBlock.Foreground>
+                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                                        <GradientStop Offset="0.0" Color="#FFB9EBFF" />
+                                        <GradientStop Offset="0.49" Color="#FF86CBFF" />
+                                        <GradientStop Offset="1.0" Color="#FFA1E7FF" />
+                                    </LinearGradientBrush>
+                                </TextBlock.Foreground>
+                            </TextBlock>
+                            <TextBlock
+                                Grid.Row="1"
+                                HorizontalAlignment="Center"
+                                Foreground="White"
+                                TextAlignment="Center"
+                                TextWrapping="Wrap">
+                                <Run x:Uid="CmdPal_Description" />
+                                <Hyperlink NavigateUri="">
+                                    <Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
+                                </Hyperlink>
+                            </TextBlock>
+                            <Image
+                                Grid.Row="2"
+                                Margin="0,16,0,0"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Top"
+                                Source="/Assets/Settings/Modules/CmdPal.png"
+                                Stretch="Uniform" />
+                        </Grid>
+                    </tkcontrols:OpacityMaskView>
+
+                    <Grid
                         Grid.Row="1"
-                        Grid.Column="2"
-                        HorizontalAlignment="Center"
-                        TextAlignment="Center"
-                        TextWrapping="Wrap">
-                        <Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
-                        <Run
-                            x:Uid="CmdPal_ModernDescription"
-                            FontSize="12"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
-                    </TextBlock>
-                </Grid>
-                <StackPanel
-                    Grid.Row="2"
-                    Margin="0,8,0,0"
-                    Orientation="Vertical"
-                    Spacing="{StaticResource SettingsCardSpacing}">
-                    <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
+                        Margin="0,-12,0,24"
+                        ColumnSpacing="32"
+                        RowSpacing="8">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <FontIcon
+                            HorizontalAlignment="Center"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Glyph="&#xEB3B;" />
+                        <TextBlock
+                            Grid.Row="1"
+                            HorizontalAlignment="Center"
+                            TextAlignment="Center"
+                            TextWrapping="Wrap">
+                            <Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
+                            <Run
+                                x:Uid="CmdPal_ExtensibleDescription"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                        </TextBlock>
+
+                        <FontIcon
+                            Grid.Column="1"
+                            HorizontalAlignment="Center"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Glyph="&#xE945;" />
+                        <TextBlock
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            HorizontalAlignment="Center"
+                            TextAlignment="Center"
+                            TextWrapping="Wrap">
+                            <Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
+                            <Run
+                                x:Uid="CmdPal_FastDescription"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                        </TextBlock>
+
+                        <FontIcon
+                            Grid.Column="2"
+                            HorizontalAlignment="Center"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Glyph="&#xE790;" />
+                        <TextBlock
+                            Grid.Row="1"
+                            Grid.Column="2"
+                            HorizontalAlignment="Center"
+                            TextAlignment="Center"
+                            TextWrapping="Wrap">
+                            <Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
+                            <Run
+                                x:Uid="CmdPal_ModernDescription"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                        </TextBlock>
+                    </Grid>
+                    <StackPanel
+                        Grid.Row="2"
+                        Margin="0,8,0,0"
+                        Orientation="Vertical"
+                        Spacing="{StaticResource SettingsCardSpacing}">
+                        <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
+                            <tkcontrols:SettingsCard
+                                Name="CmdPalEnableCmdPal"
+                                x:Uid="CmdPal_Enable_CmdPal"
+                                HorizontalAlignment="Stretch"
+                                HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
+                                <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
+                            </tkcontrols:SettingsCard>
+                        </controls:GPOInfoControl>
                         <tkcontrols:SettingsCard
-                            Name="CmdPalEnableCmdPal"
-                            x:Uid="CmdPal_Enable_CmdPal"
-                            HorizontalAlignment="Stretch"
-                            HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
-                            <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
+                            x:Uid="CmdPal_Launch"
+                            Grid.Row="3"
+                            ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                            Click="LaunchCard_Click"
+                            HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
+                            IsClickEnabled="True"
+                            IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
+                            <ItemsControl
+                                AutomationProperties.AccessibilityView="Raw"
+                                IsTabStop="False"
+                                ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <StackPanel Orientation="Horizontal" Spacing="4" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate>
+                                        <ptcontrols:KeyVisual
+                                            Padding="8,8,8,8"
+                                            VerticalAlignment="Center"
+                                            AutomationProperties.AccessibilityView="Raw"
+                                            Content="{Binding}"
+                                            Style="{StaticResource AccentKeyVisualStyle}" />
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
                         </tkcontrols:SettingsCard>
-                    </controls:GPOInfoControl>
-                    <tkcontrols:SettingsCard
-                        x:Uid="CmdPal_Launch"
-                        Grid.Row="3"
-                        ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
-                        Click="LaunchCard_Click"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
-                        IsClickEnabled="True"
-                        IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                        <ItemsControl
-                            AutomationProperties.AccessibilityView="Raw"
-                            IsTabStop="False"
-                            ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Horizontal" Spacing="4" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate>
-                                    <ptcontrols:KeyVisual
-                                        Padding="8,8,8,8"
-                                        VerticalAlignment="Center"
-                                        AutomationProperties.AccessibilityView="Raw"
-                                        Content="{Binding}"
-                                        Style="{StaticResource AccentKeyVisualStyle}" />
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
-                    </tkcontrols:SettingsCard>
-                    <tkcontrols:SettingsCard
-                        x:Uid="CmdPal_Settings"
-                        Grid.Row="4"
-                        ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
-                        Click="SettingsCard_Click"
-                        HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
-                        IsClickEnabled="True"
-                        IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
-                </StackPanel>
+                        <tkcontrols:SettingsCard
+                            x:Uid="CmdPal_Settings"
+                            Grid.Row="4"
+                            ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                            Click="SettingsCard_Click"
+                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
+                            IsClickEnabled="True"
+                            IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
+                    </StackPanel>
+                </Grid>
             </Grid>
         </ScrollViewer>
     </Grid>