[UX] Settings UI refinements (#19001)

This PR is a (first) design pass on the Terminal settings UX to bring consistency and alignment with the rest of the OS and other settings surfaces. High-level changes include: - Using WinUI brushes vs. UWP/OS brushes. [See brushes overview in the WinUI 3 Gallery:](winui3gallery://item/Color). - Updating pixel values for margins, fontsizes, paddings etc. using units of 4. See [the design guidelines for more info](https://learn.microsoft.com/en-us/windows/apps/design/basics/content-basics). - Adding rounded corners on various elements to be consistent with the Windows 11 look and feel (using the ControlCornerRadius or OverlayCornerRadius WinUI resources as much as possible). - Decreasing the page header titles / breadcrumb so it feels a bit less cramped. - Fixing a bug where the title of the page was not aligned with the content when resizing the window (note to self: should fix this in PowerToys too): - Ensuring the subheader texts for settings categories are inline with the rest of the OS (== decreasing the fontsize). --------- Co-authored-by: Carlos Zamora <carlos.zamora@microsoft.com>
2025-12-10 18:43:54 -06:00 · 2025-07-23 19:07:11 +02:00 · 2025-07-23 19:07:11 +02:00 · 48b796f102
commit 48b796f102
parent f22295ef2c
15 changed files with 160 additions and 155 deletions
--- a/src/cascadia/TerminalSettingsEditor/Actions.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Actions.xaml
@ -56,13 +56,14 @@
                    <Style x:Key="KeyChordBorderStyle"
                           TargetType="Border">
                        <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
-                        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+                        <Setter Property="Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
+                        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+                        <Setter Property="Padding" Value="4,4,4,4" />
                    </Style>
                    <Style x:Key="KeyChordTextBlockStyle"
                           TargetType="TextBlock">
-                        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
                    </Style>

                </ResourceDictionary>
@ -97,13 +98,15 @@
                    <Style x:Key="KeyChordBorderStyle"
                           TargetType="Border">
                        <Setter Property="BorderThickness" Value="1" />
-                        <Setter Property="CornerRadius" Value="1" />
-                        <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
-                        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="BorderThickness" Value="1" />
+                        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+                        <Setter Property="Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
+                        <Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
+                        <Setter Property="Padding" Value="4,4,4,4" />
                    </Style>
                    <Style x:Key="KeyChordTextBlockStyle"
                           TargetType="TextBlock">
-                        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
                    </Style>

                </ResourceDictionary>
@ -138,7 +141,7 @@
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <x:Int32 x:Key="EditButtonSize">32</x:Int32>
-            <x:Double x:Key="EditButtonIconSize">15</x:Double>
+            <x:Double x:Key="EditButtonIconSize">14</x:Double>
            <Style x:Key="EditButtonStyle"
                   BasedOn="{StaticResource DefaultButtonStyle}"
                   TargetType="Button">
@ -150,7 +153,7 @@
            <Style x:Key="AccentEditButtonStyle"
                   BasedOn="{StaticResource AccentButtonStyle}"
                   TargetType="Button">
-                <Setter Property="Padding" Value="3" />
+                <Setter Property="Padding" Value="4" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="Height" Value="{StaticResource EditButtonSize}" />
                <Setter Property="Width" Value="{StaticResource EditButtonSize}" />
@ -191,6 +194,7 @@

                        <!--  Command Name  -->
                        <TextBlock Grid.Column="0"
+                                   FontWeight="Normal"
                                   Style="{StaticResource KeyBindingNameTextBlockStyle}"
                                   Text="{x:Bind Name, Mode=OneWay}"
                                   Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(IsInEditMode), Mode=OneWay}" />
@ -205,7 +209,7 @@

                        <!--  Key Chord Text  -->
                        <Border Grid.Column="1"
-                                Padding="2,0,2,0"
+                                Padding="8,4,8,4"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Style="{ThemeResource KeyChordBorderStyle}"
@ -317,7 +321,6 @@
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
-
                        </StackPanel>
                    </Grid>
                </ListViewItem>
@ -332,6 +335,7 @@
                    Style="{StaticResource SettingsStackStyle}">
            <!--  Add New Button  -->
            <Button x:Name="AddNewButton"
+                    Margin="0,12,0,0"
                    Click="AddNew_Click">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@ -32,25 +32,24 @@
                <!--  Loosely based on NonExpanderGrid style  -->
                <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
                <Setter Property="MinHeight" Value="64" />
-                <Setter Property="Padding" Value="16,0,8,0" />
+                <Setter Property="Padding" Value="0,0,8,0" />
            </Style>
        </ResourceDictionary>
    </Page.Resources>

-    <Grid Margin="0,0,0,8"
+    <Grid MaxWidth="{StaticResource StandardControlMaxWidth}"
+          Margin="0,0,0,8"
          RowSpacing="8">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0"
-                    MaxWidth="{StaticResource StandardControlMaxWidth}"
                    Spacing="8">
            <TextBlock x:Uid="ColorSchemesDisclaimer"
                       Style="{StaticResource DisclaimerStyle}" />
-
            <Button x:Name="AddNewButton"
-                    Margin="4,0,0,0"
+                    Margin="0"
                    Click="AddNew_Click"
                    Style="{StaticResource BrowseButtonStyle}">
                <StackPanel Orientation="Horizontal">
@ -65,6 +64,7 @@
        <ListView x:Name="ColorSchemeListView"
                  Grid.Row="1"
                  MaxWidth="{StaticResource StandardControlMaxWidth}"
+                  Margin="-16,0,0,0"
                  IsItemClickEnabled="True"
                  ItemClick="{x:Bind ViewModel.SchemeListItemClicked}"
                  ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
@ -88,11 +88,11 @@
                        <!--  Set the height of the inner grid as 48 to be 3/4 of the ListViewItem height  -->
                        <Grid Grid.Column="0"
                              Height="48"
-                              Padding="12,11,8,8"
+                              Padding="12,12,8,8"
                              VerticalAlignment="Center"
                              Background="{x:Bind mtu:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
                              ColumnSpacing="2"
-                              CornerRadius="4"
+                              CornerRadius="{StaticResource ControlCornerRadius}"
                              RowSpacing="2">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
@ -200,19 +200,19 @@
                                       Text="{x:Bind Name, Mode=OneWay}" />
                        </Grid>
                        <Border Grid.Column="1"
-                                Margin="10,0,0,0"
-                                Padding="2,0,2,0"
+                                Margin="12,0,0,0"
+                                Padding="8,4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
-                                Background="{ThemeResource SystemAltMediumLowColor}"
-                                BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
+                                Background="{ThemeResource SubtleFillColorSecondaryBrush}"
+                                BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}"
                                BorderThickness="1"
-                                CornerRadius="1"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
                                Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
                            <TextBlock x:Uid="ColorScheme_DefaultTag"
                                       Grid.Column="1"
                                       AutomationProperties.AccessibilityView="Raw"
-                                       Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        </Border>
                    </Grid>
                </DataTemplate>
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@ -68,24 +68,23 @@
    <Color x:Key="DeleteButtonColor">Firebrick</Color>

    <x:Double x:Key="StandardIconSize">14.0</x:Double>
-    <Thickness x:Key="StandardIndentMargin">13,0,0,0</Thickness>
    <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
-    <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
+    <x:Double x:Key="StandardBoxMinWidth">248</x:Double>
    <x:Double x:Key="StandardControlMaxWidth">1000</x:Double>
-    <Thickness x:Key="SettingStackMargin">13,0,13,48</Thickness>
+    <Thickness x:Key="SettingStackMargin">0,0,0,0</Thickness>

    <!-- We're purposefully not providing a DataType here.
     This is expected to be used with an IReference<Microsoft::Terminal::Core::Color>.
     We're doing all the data type handling in the used converters.-->
    <DataTemplate x:Key="ColorPreviewTemplate">
-        <Grid ColumnSpacing="5">
+        <Grid ColumnSpacing="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0"
-                       Width="13"
-                       Height="13"
+                       Width="12"
+                       Height="12"
                       VerticalAlignment="Center"
                       Fill="{Binding Converter={StaticResource ColorToBrushConverter}}"
                       RadiusX="2"
@ -112,13 +111,13 @@
    <!--  Used to stack a group of settings  -->
    <Style x:Key="SettingsStackStyle"
           TargetType="StackPanel">
-        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
    </Style>

    <!--  Used to stack a group of settings inside a pivot  -->
    <Style x:Key="PivotStackStyle"
           TargetType="StackPanel">
-        <Setter Property="Margin" Value="{StaticResource SettingStackMargin}" />
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
    </Style>

    <!--  Combo Box  -->
@ -145,7 +144,7 @@

    <!--  Text Block  -->
    <Style x:Key="TextBlockSettingStyle"
-           BasedOn="{StaticResource BaseTextBlockStyle}"
+           BasedOn="{StaticResource BodyTextBlockStyle}"
           TargetType="TextBlock">
        <Setter Property="MinWidth" Value="{StaticResource StandardBoxMinWidth}" />
        <Setter Property="MaxWidth" Value="400" />
@ -155,24 +154,27 @@
    </Style>

    <Style x:Key="TextBlockSubHeaderStyle"
-           BasedOn="{StaticResource SubtitleTextBlockStyle}"
+           BasedOn="{StaticResource BodyStrongTextBlockStyle}"
           TargetType="TextBlock">
        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
+        <Setter Property="Margin" Value="0,32,0,4" />
    </Style>

    <!--  Used for disclaimers  -->
    <Style x:Key="DisclaimerStyle"
           TargetType="TextBlock">
        <Setter Property="TextWrapping" Value="Wrap" />
-        <Setter Property="MaxWidth" Value="1000" />
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
+        <Setter Property="Margin" Value="0,0,0,8" />
    </Style>

    <!--  Used for flyout messages  -->
    <Style x:Key="CustomFlyoutTextStyle"
           BasedOn="{StaticResource BaseTextBlockStyle}"
           TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="Bold" />
-        <Setter Property="Margin" Value="0,0,0,10" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="Margin" Value="0,0,0,8" />
        <Setter Property="TextWrapping" Value="Wrap" />
    </Style>

@ -200,8 +202,8 @@
    <Style x:Key="BrowseButtonStyle"
           BasedOn="{StaticResource BaseButtonStyle}"
           TargetType="Button">
-        <Setter Property="Margin" Value="10,0,0,0" />
-        <Setter Property="MinHeight" Value="33" />
+        <Setter Property="Margin" Value="8,0,0,0" />
+        <Setter Property="MinHeight" Value="32" />
    </Style>

    <!--  Delete button based on Accent button template  -->
@ -306,8 +308,8 @@
    <Style x:Key="ExtraSmallButtonStyle"
           BasedOn="{StaticResource BrowseButtonStyle}"
           TargetType="Button">
-        <Setter Property="Height" Value="25" />
-        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="Width" Value="24" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="MinHeight" Value="0" />
@ -317,25 +319,25 @@
    <Style x:Key="SmallButtonStyle"
           BasedOn="{StaticResource BrowseButtonStyle}"
           TargetType="Button">
-        <Setter Property="Height" Value="33" />
-        <Setter Property="Width" Value="33" />
-        <Setter Property="Padding" Value="5" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Padding" Value="4" />
    </Style>

    <Style x:Key="AccentBrowseButtonStyle"
           BasedOn="{StaticResource AccentButtonStyle}"
           TargetType="Button">
-        <Setter Property="Margin" Value="10,0,0,0" />
+        <Setter Property="Margin" Value="8,0,0,0" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
    </Style>

    <Style x:Key="AccentSmallButtonStyle"
           BasedOn="{StaticResource AccentButtonStyle}"
           TargetType="Button">
-        <Setter Property="Margin" Value="10,0,0,0" />
+        <Setter Property="Margin" Value="8,0,0,0" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
-        <Setter Property="Height" Value="33" />
-        <Setter Property="Width" Value="33" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="32" />
        <Setter Property="Padding" Value="5" />
    </Style>

@ -350,8 +352,8 @@
    <Style x:Key="DeleteExtraSmallButtonStyle"
           BasedOn="{StaticResource DeleteButtonStyle}"
           TargetType="Button">
-        <Setter Property="Height" Value="25" />
-        <Setter Property="Width" Value="25" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="Width" Value="24" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="MinHeight" Value="0" />
@ -360,7 +362,7 @@

    <Style x:Key="IconButtonTextBlockStyle"
           TargetType="TextBlock">
-        <Setter Property="Margin" Value="10,0,0,0" />
+        <Setter Property="Margin" Value="8,0,0,0" />
    </Style>

    <Style x:Key="BIAlignmentToggleButtonStyle"
@ -1195,7 +1197,6 @@
           TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
-        <Setter Property="MaxWidth" Value="1000" />
        <Setter Property="MinHeight" Value="64" />
        <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
        <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
--- a/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
+++ b/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
@ -84,16 +84,18 @@
    </Page.Resources>

    <StackPanel Style="{StaticResource SettingsStackStyle}">
-        <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+        <Border MaxWidth="{StaticResource StandardControlMaxWidth}"
+                CornerRadius="{StaticResource ControlCornerRadius}">
            <!--  Preview of the selected scheme  -->
-            <Grid Width="350"
-                  Height="160"
+            <Grid Width="348"
                  MaxWidth="{StaticResource StandardControlMaxWidth}"
-                  Margin="4"
+                  Margin="0,12"
+                  Padding="8"
                  HorizontalAlignment="Left"
                  Background="{x:Bind mtu:Converters.ColorToBrush(ViewModel.BackgroundColor.Color), Mode=OneWay}"
-                  BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                  BorderThickness="1">
+                  BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}"
+                  BorderThickness="1"
+                  CornerRadius="{StaticResource ControlCornerRadius}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
@ -468,8 +470,7 @@
            </StackPanel>
        </local:SettingContainer>

-        <Grid MaxWidth="1000"
-              Margin="2,6,0,0"
+        <Grid Margin="2,6,0,0"
              ColumnSpacing="4"
              Visibility="{x:Bind ViewModel.IsEditable, Mode=OneWay}">
            <Grid.ColumnDefinitions>
--- a/src/cascadia/TerminalSettingsEditor/Extensions.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Extensions.xaml
@ -216,7 +216,7 @@
                                        Orientation="Horizontal">
                                <IconSourceElement Width="16"
                                                   Height="16"
-                                                   Margin="0,0,8,0"
+                                                   Margin="0,0,12,0"
                                                   IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Profile.EvaluatedIcon), Mode=OneWay}" />

                                <TextBlock Text="{x:Bind Profile.Name, Mode=OneWay}" />
@ -248,7 +248,6 @@
            <!--  This styling matches that of ExpanderSettingContainerStyle for consistency  -->
            <Style x:Key="ExpanderStyle"
                   TargetType="muxc:Expander">
-                <Setter Property="MaxWidth" Value="1000" />
                <Setter Property="MinHeight" Value="64" />
                <Setter Property="Margin" Value="0,4,0,0" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
@ -289,8 +288,8 @@
                          Padding="8"
                          VerticalAlignment="Center"
                          Background="{x:Bind mtu:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
-                          ColumnSpacing="1"
-                          CornerRadius="2"
+                          ColumnSpacing="2"
+                          CornerRadius="{StaticResource ControlCornerRadius}"
                          RowSpacing="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
@ -451,10 +450,12 @@

            <!--  Learn more about fragment extensions  -->
            <HyperlinkButton x:Uid="Extensions_DisclaimerHyperlink"
+                             Margin="-12,0,0,0"
                             NavigateUri="https://go.microsoft.com/fwlink/?linkid=2321753" />

            <!--  Grouping: Active Extensions  -->
            <TextBlock x:Uid="Extensions_ActiveExtensionsHeader"
+                       Margin="0,12,0,8"
                       Style="{StaticResource TextBlockSubHeaderStyle}" />
            <ItemsControl x:Name="ActiveExtensionsList"
                          IsTabStop="False"
@ -513,9 +514,11 @@
        </StackPanel>

        <!--  Grouping: Modified Profiles  -->
-        <StackPanel Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesModified), Mode=OneWay}"
+        <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesModified), Mode=OneWay}"
                    Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(ViewModel.NoProfilesModified), Mode=OneWay}">
            <TextBlock x:Uid="Extensions_ModifiedProfilesHeader"
+                       Margin="0,0,0,8"
                       Style="{StaticResource TextBlockSubHeaderStyle}" />
            <ItemsControl x:Name="ModifiedProfilesList"
                          IsTabStop="False"
@ -525,9 +528,11 @@
        </StackPanel>

        <!--  Grouping: Added Profiles  -->
-        <StackPanel Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesAdded), Mode=OneWay}"
+        <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesAdded), Mode=OneWay}"
                    Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(ViewModel.NoProfilesAdded), Mode=OneWay}">
            <TextBlock x:Uid="Extensions_AddedProfilesHeader"
+                       Margin="0,0,0,8"
                       Style="{StaticResource TextBlockSubHeaderStyle}" />
            <ItemsControl x:Name="AddedProfilesList"
                          IsTabStop="False"
@ -537,9 +542,11 @@
        </StackPanel>

        <!--  Grouping: Added Color Schemes  -->
-        <StackPanel Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesAdded), Mode=OneWay}"
+        <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Margin="{x:Bind CalculateMargin(ViewModel.NoProfilesAdded), Mode=OneWay}"
                    Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(ViewModel.NoSchemesAdded), Mode=OneWay}">
            <TextBlock x:Uid="Extensions_AddedColorSchemesHeader"
+                       Margin="0,0,0,8"
                       Style="{StaticResource TextBlockSubHeaderStyle}" />
            <ItemsControl x:Name="AddedColorSchemesList"
                          IsTabStop="False"
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@ -193,8 +193,8 @@
            <local:SettingContainer x:Uid="Globals_LaunchSize"
                                    CurrentValue="{x:Bind ViewModel.LaunchSizeCurrentValue, Mode=OneWay}"
                                    Style="{StaticResource ExpanderSettingContainerStyle}">
-                <Grid ColumnSpacing="10"
-                      RowSpacing="10">
+                <Grid ColumnSpacing="12"
+                      RowSpacing="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
@ -236,7 +236,7 @@
            <local:SettingContainer x:Uid="Globals_LaunchParameters"
                                    CurrentValue="{x:Bind ViewModel.LaunchParametersCurrentValue, Mode=OneWay}"
                                    Style="{StaticResource ExpanderSettingContainerStyle}">
-                <Grid RowSpacing="10">
+                <Grid RowSpacing="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
--- a/src/cascadia/TerminalSettingsEditor/MainPage.xaml
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.xaml
@ -17,7 +17,6 @@
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CommonResources.xaml" />
-
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>

@ -60,7 +59,6 @@

            <Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
            <Thickness x:Key="NavigationViewMinimalContentGridBorderThickness">0</Thickness>
-
        </ResourceDictionary>
    </Page.Resources>

@ -73,28 +71,32 @@
                         TabFocusNavigation="Cycle">
        <muxc:NavigationView.Resources>
            <ResourceDictionary>
-                <Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness>
+                <Thickness x:Key="NavigationViewHeaderMargin">0,4,0,0</Thickness>
            </ResourceDictionary>
        </muxc:NavigationView.Resources>
        <muxc:NavigationView.Header>
-            <muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar"
-                                MaxWidth="{StaticResource StandardControlMaxWidth}"
-                                ItemClicked="BreadcrumbBar_ItemClicked"
-                                ItemsSource="{x:Bind Breadcrumbs}">
-                <muxc:BreadcrumbBar.ItemTemplate>
-                    <DataTemplate x:DataType="local:Breadcrumb">
-                        <TextBlock Text="{x:Bind Label}" />
-                    </DataTemplate>
-                </muxc:BreadcrumbBar.ItemTemplate>
-                <muxc:BreadcrumbBar.Resources>
-                    <ResourceDictionary>
-                        <x:Double x:Key="BreadcrumbBarItemThemeFontSize">28</x:Double>
-                        <Thickness x:Key="BreadcrumbBarChevronPadding">11,4,12,0</Thickness>
-                        <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight>
-                        <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double>
-                    </ResourceDictionary>
-                </muxc:BreadcrumbBar.Resources>
-            </muxc:BreadcrumbBar>
+            <Grid Padding="16,0">
+                <!--  Wrapping the BreadcrumbBar in a Grid to avoid the title to drift (and no longer being aligned with the content of the page) when resizing the window. It's weird, I know. I believe it has to do with https://github.com/microsoft/microsoft-ui-xaml/issues/3842 doing funky things when setting a MaxWidth  -->
+                <muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar"
+                                    MaxWidth="1000"
+                                    ItemClicked="BreadcrumbBar_ItemClicked"
+                                    ItemsSource="{x:Bind Breadcrumbs}">
+                    <muxc:BreadcrumbBar.ItemTemplate>
+                        <DataTemplate x:DataType="local:Breadcrumb">
+                            <TextBlock Text="{x:Bind Label}" />
+                        </DataTemplate>
+                    </muxc:BreadcrumbBar.ItemTemplate>
+                    <muxc:BreadcrumbBar.Resources>
+                        <ResourceDictionary>
+                            <x:Double x:Key="BreadcrumbBarItemThemeFontSize">20</x:Double>
+                            <Thickness x:Key="BreadcrumbBarChevronPadding">8,4,8,0</Thickness>
+                            <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight>
+                            <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double>
+                        </ResourceDictionary>
+                    </muxc:BreadcrumbBar.Resources>
+                </muxc:BreadcrumbBar>
+
+            </Grid>
        </muxc:NavigationView.Header>

        <muxc:NavigationView.MenuItems>
@ -191,7 +193,7 @@
            </muxc:NavigationViewItem>
        </muxc:NavigationView.FooterMenuItems>

-        <Grid Margin="0,0,0,0">
+        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
@ -199,7 +201,8 @@
            <ScrollViewer x:Name="SettingsMainPage_ScrollViewer"
                          Grid.Row="0">
                <Frame x:Name="contentFrame"
-                       Grid.Row="0">
+                       Grid.Row="0"
+                       Padding="16,0,16,48">
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition>
@ -213,13 +216,13 @@
            </ScrollViewer>
            <!--  Explicitly set the background color on grid to prevent the navigation animation from overflowing it  -->
            <Grid Grid.Row="1"
-                  Height="55"
+                  Height="56"
                  BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                  BorderThickness="0,1,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
-                <StackPanel Margin="30,0,0,0"
+                <StackPanel Margin="32,0,0,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Orientation="Vertical">
@ -242,7 +245,7 @@
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
-                <StackPanel Margin="0,0,30,0"
+                <StackPanel Margin="0,0,32,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            Orientation="Horizontal">
@ -252,7 +255,7 @@
                            Style="{StaticResource AccentButtonStyle}" />
                    <Button x:Name="ResetButton"
                            x:Uid="Settings_ResetSettingsButton"
-                            Margin="10,0,0,0"
+                            Margin="8,0,0,0"
                            Click="ResetButton_Click" />
                </StackPanel>
            </Grid>
--- a/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
+++ b/src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml
@ -227,8 +227,7 @@
        </ResourceDictionary>
    </Page.Resources>

-    <Grid Margin="{StaticResource SettingStackMargin}"
-          RowSpacing="10">
+    <Grid RowSpacing="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
@ -271,7 +270,7 @@
        <!--  New Tab Menu Content  -->
        <StackPanel Grid.Row="0"
                    MaxWidth="{StaticResource StandardControlMaxWidth}"
-                    Spacing="10">
+                    Spacing="8">
            <Border Height="300"
                    MaxWidth="{StaticResource StandardControlMaxWidth}"
                    Margin="0,12,0,0"
@ -297,7 +296,7 @@
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE8DE;" />
                        <TextBlock x:Uid="NewTabMenu_MoveToFolderTextBlock"
-                                   Margin="10,0,0,0" />
+                                   Margin="8,0,0,0" />
                    </StackPanel>
                </Button>
                <Button x:Name="DeleteMultipleButton"
@ -308,7 +307,7 @@
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE74D;" />
                        <TextBlock x:Uid="NewTabMenu_DeleteMultipleTextBlock"
-                                   Margin="10,0,0,0" />
+                                   Margin="8,0,0,0" />
                    </StackPanel>
                </Button>
            </StackPanel>
@ -359,7 +358,7 @@
                                    Style="{StaticResource SettingContainerWithIcon}">

                <StackPanel Orientation="Horizontal"
-                            Spacing="5">
+                            Spacing="4">
                    <!--  Select profile to add  -->
                    <ComboBox x:Name="AddProfileComboBox"
                              MinWidth="{StaticResource StandardBoxMinWidth}"
@ -448,7 +447,7 @@
            <local:SettingContainer x:Uid="NewTabMenu_AddMatchProfiles"
                                    FontIconGlyph="&#xE748;"
                                    Style="{StaticResource ExpanderSettingContainerStyleWithIcon}">
-                <StackPanel Spacing="10">
+                <StackPanel Spacing="8">
                    <HyperlinkButton x:Uid="NewTabMenu_AddMatchProfiles_Help"
                                     NavigateUri="https://learn.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference" />
                    <TextBox x:Uid="NewTabMenu_AddMatchProfiles_Name"
--- a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
@ -123,11 +123,11 @@
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
-            <StackPanel Spacing="5">
+            <StackPanel Spacing="4">
                <ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
                              Click="NullColorButton_Clicked"
                              IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
-                    <Grid ColumnSpacing="5">
+                    <Grid ColumnSpacing="4">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
@ -138,7 +138,7 @@
                                Height="20"
                                Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
                                BorderThickness="1"
-                                CornerRadius="{ThemeResource ControlCornerRadius}" />
+                                CornerRadius="{StaticResource ControlCornerRadius}" />

                        <TextBlock Grid.Column="1"
                                   Text="{x:Bind NullColorButtonLabel}" />
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.xaml
@ -32,8 +32,6 @@
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
-                   Grid.Row="0"
-                   Margin="{StaticResource StandardIndentMargin}"
                   Style="{StaticResource DisclaimerStyle}"
                   Visibility="{x:Bind Profile.IsBaseLayer}" />
        <StackPanel Grid.Row="1"
@ -123,7 +121,7 @@
                    <ItemsControl ItemsSource="{x:Bind Profile.CurrentBellSounds, Mode=OneWay}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
-                                <StackPanel Spacing="5" />
+                                <StackPanel Spacing="4" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
@ -156,7 +154,7 @@
                                    </StackPanel>
                                    <Button x:Uid="Profile_BellSoundAudioPreview"
                                            Grid.Column="1"
-                                            Margin="5,0,0,0"
+                                            Margin="4,0,0,0"
                                            VerticalAlignment="Stretch"
                                            Click="BellSoundAudioPreview_Click"
                                            IsEnabled="{x:Bind FileExists, Mode=OneWay}"
@ -167,7 +165,7 @@
                                    </Button>
                                    <Button x:Uid="Profile_BellSoundDelete"
                                            Grid.Column="2"
-                                            Margin="5,0,0,0"
+                                            Margin="4,0,0,0"
                                            VerticalAlignment="Stretch"
                                            Click="BellSoundDelete_Click"
                                            Style="{StaticResource DeleteButtonStyle}"
@ -185,7 +183,7 @@
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE948;" />
                            <TextBlock x:Uid="Profile_AddBellSound"
-                                       Margin="10,0,0,0" />
+                                       Margin="8,0,0,0" />
                        </StackPanel>
                    </Button>
                </StackPanel>
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml
@ -50,27 +50,28 @@
        </ResourceDictionary>
    </Page.Resources>

-    <Grid>
+    <Grid MaxWidth="{StaticResource StandardControlMaxWidth}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
                   Grid.Row="0"
-                   Margin="{StaticResource StandardIndentMargin}"
                   Style="{StaticResource DisclaimerStyle}"
                   Visibility="{x:Bind Profile.IsBaseLayer}" />
        <StackPanel Grid.Row="1"
+                    Margin="0,12,0,0"
                    Style="{StaticResource SettingsStackStyle}">
            <!--  Control Preview  -->
-            <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+            <Border MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    CornerRadius="{StaticResource ControlCornerRadius}">
                <Border x:Name="ControlPreview"
                        Width="400"
                        Height="180"
-                        Margin="0,12,0,12"
                        HorizontalAlignment="Left"
-                        BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                        BorderThickness="1" />
+                        BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}"
+                        BorderThickness="1"
+                        CornerRadius="{StaticResource ControlCornerRadius}" />
            </Border>

            <local:Appearances Appearance="{x:Bind Profile.DefaultAppearance, Mode=OneWay}"
@ -131,9 +132,9 @@
                    <Border Margin="0,12,0,12"
                            Padding="2,0,2,0"
                            HorizontalAlignment="Left"
-                            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultSolidBrush}"
                            BorderThickness="1"
-                            CornerRadius="8">
+                            CornerRadius="{StaticResource OverlayCornerRadius}">
                        <Grid>

                            <Grid.RowDefinitions>
@ -206,23 +207,23 @@
                    <TextBlock x:Uid="Profile_UnfocusedAppearanceTextBlock"
                               Style="{StaticResource TitleTextBlockStyle}" />
                    <Button x:Uid="Profile_CreateUnfocusedAppearanceButton"
-                            Margin="10,0,0,0"
+                            Margin="8,0,0,0"
                            Click="CreateUnfocusedAppearance_Click"
                            Style="{StaticResource BaseButtonStyle}"
                            Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(Profile.HasUnfocusedAppearance), Mode=OneWay}">
                        <Button.Content>
                            <StackPanel Orientation="Horizontal">
-                                <FontIcon Margin="0,3,0,0"
+                                <FontIcon Margin="0,4,0,0"
                                          FontSize="{StaticResource StandardIconSize}"
                                          Glyph="&#xE710;" />
                                <TextBlock x:Uid="Profile_AddAppearanceButton"
-                                           Margin="10,0,0,0"
+                                           Margin="8,0,0,0"
                                           FontSize="{StaticResource StandardIconSize}" />
                            </StackPanel>
                        </Button.Content>
                    </Button>
                    <Button x:Uid="Profile_DeleteUnfocusedAppearanceButton"
-                            Margin="10,0,0,0"
+                            Margin="8,0,0,0"
                            Click="DeleteUnfocusedAppearance_Click"
                            Style="{StaticResource DeleteButtonStyle}"
                            Visibility="{x:Bind Profile.HasUnfocusedAppearance, Mode=OneWay}">
@ -231,7 +232,7 @@
                                <FontIcon FontSize="{StaticResource StandardIconSize}"
                                          Glyph="&#xE74D;" />
                                <TextBlock x:Uid="Profile_DeleteAppearanceButton"
-                                           Margin="10,0,0,0"
+                                           Margin="8,0,0,0"
                                           FontSize="{StaticResource StandardIconSize}" />
                            </StackPanel>
                        </Button.Content>
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
@ -22,14 +22,13 @@
    </Page.Resources>

    <!--  Use a Grid instead of a StackPanel. StackPanel suppresses the inner ScrollViewer.  -->
-    <Grid>
+    <Grid MaxWidth="{StaticResource StandardControlMaxWidth}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
                   Grid.Row="0"
-                   Margin="{StaticResource StandardIndentMargin}"
                   Style="{StaticResource DisclaimerStyle}"
                   Visibility="{x:Bind Profile.IsBaseLayer}" />
        <StackPanel Grid.Row="1"
@ -64,7 +63,7 @@
                             Style="{StaticResource TextBoxSettingStyle}"
                             Text="{x:Bind Profile.Commandline, Mode=TwoWay}" />
                    <Button x:Uid="Profile_CommandlineBrowse"
-                            Margin="0,10,0,0"
+                            Margin="0,8,0,0"
                            Click="Commandline_Click"
                            Style="{StaticResource BrowseButtonStyle}" />
                </StackPanel>
@ -87,13 +86,13 @@
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="StartingDirectoryBrowse"
                                x:Uid="Profile_StartingDirectoryBrowse"
-                                Margin="0,10,10,0"
+                                Margin="0,12,12,0"
                                Click="StartingDirectory_Click"
                                IsEnabled="{x:Bind mtu:Converters.InvertBoolean(Profile.UseParentProcessDirectory), Mode=OneWay}"
                                Style="{StaticResource BrowseButtonStyle}" />
                        <CheckBox x:Name="StartingDirectoryUseParentCheckbox"
                                  x:Uid="Profile_StartingDirectoryUseParentCheckbox"
-                                  Margin="0,5,0,0"
+                                  Margin="0,4,0,0"
                                  IsChecked="{x:Bind Profile.UseParentProcessDirectory, Mode=TwoWay}" />
                    </StackPanel>
                </StackPanel>
@ -123,7 +122,7 @@
                    </Grid>
                </local:SettingContainer.CurrentValue>
                <local:SettingContainer.Content>
-                    <Grid ColumnSpacing="10">
+                    <Grid ColumnSpacing="12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
@ -150,7 +149,7 @@
                                  Visibility="{x:Bind Profile.UsingBuiltInIcon, Mode=OneWay}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="local:EnumEntry">
-                                    <Grid ColumnSpacing="10">
+                                    <Grid ColumnSpacing="12">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="16" />
                                            <ColumnDefinition Width="*" />
@ -226,7 +225,7 @@
            </local:SettingContainer>

            <TextBlock x:Uid="Profile_AdditionalSettingsHeader"
-                       Margin="0,48,0,0"
+                       Margin="0,32,0,4"
                       Style="{StaticResource TextBlockSubHeaderStyle}" />

            <Button x:Name="AppearanceNavigator"
@ -249,7 +248,7 @@
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE74D;" />
                            <TextBlock x:Uid="Profile_DeleteButton"
-                                       Margin="10,0,0,0" />
+                                       Margin="8,0,0,0" />
                        </StackPanel>
                    </Button.Content>
                    <Button.Flyout>
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Base_Orphaned.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base_Orphaned.xaml
@ -33,7 +33,7 @@
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE74D;" />
                            <TextBlock x:Uid="Profile_DeleteButton"
-                                       Margin="10,0,0,0" />
+                                       Margin="8,0,0,0" />
                        </StackPanel>
                    </Button.Content>
                </Button>
--- a/src/cascadia/TerminalSettingsEditor/Profiles_Terminal.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Terminal.xaml
@ -26,8 +26,6 @@
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
-                   Grid.Row="0"
-                   Margin="{StaticResource StandardIndentMargin}"
                   Style="{StaticResource DisclaimerStyle}"
                   Visibility="{x:Bind Profile.IsBaseLayer}" />
        <StackPanel Grid.Row="1"
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@ -14,13 +14,10 @@
        <ResourceDictionary x:Key="Light">
            <Style x:Key="SecondaryTextBlockStyle"
                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondary}" />
            </Style>
            <SolidColorBrush x:Key="SubgroupHeaderBrush"
-                             Color="{StaticResource SystemBaseMediumColor}" />
-            <Color x:Key="CardStrokeColorDefault">#0F000000</Color>
-            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
-                             Color="{StaticResource CardStrokeColorDefault}" />
+                             Color="{StaticResource TextFillColorSecondary}" />
            <StaticResource x:Key="ExpanderHeaderBorderBrush"
                            ResourceKey="CardStrokeColorDefaultBrush" />

@ -83,13 +80,10 @@
        <ResourceDictionary x:Key="Dark">
            <Style x:Key="SecondaryTextBlockStyle"
                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondary}" />
            </Style>
            <SolidColorBrush x:Key="SubgroupHeaderBrush"
-                             Color="{StaticResource SystemBaseMediumColor}" />
-            <Color x:Key="CardStrokeColorDefault">#19000000</Color>
-            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
-                             Color="{StaticResource CardStrokeColorDefault}" />
+                             Color="{StaticResource TextFillColorSecondary}" />
            <StaticResource x:Key="ExpanderHeaderBorderBrush"
                            ResourceKey="CardStrokeColorDefaultBrush" />

@ -136,9 +130,9 @@
    <Style x:Key="SettingContainerResetButtonStyle"
           BasedOn="{StaticResource DefaultButtonStyle}"
           TargetType="Button">
-        <Setter Property="Margin" Value="5,0,0,0" />
-        <Setter Property="Height" Value="19" />
-        <Setter Property="Width" Value="19" />
+        <Setter Property="Margin" Value="4,0,0,0" />
+        <Setter Property="Height" Value="20" />
+        <Setter Property="Width" Value="20" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Background" Value="Transparent" />
@ -147,7 +141,7 @@
    <Style x:Key="SettingContainerFontIconStyle"
           TargetType="FontIcon">
        <Setter Property="Foreground" Value="{ThemeResource SettingContainerResetButtonIconForeground}" />
-        <Setter Property="FontSize" Value="11" />
+        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
    </Style>

@ -183,7 +177,7 @@
    <Style x:Key="SettingContainerCurrentValueTextBlockStyle"
           BasedOn="{StaticResource SettingsPageItemDescriptionStyle}"
           TargetType="TextBlock">
-        <Setter Property="MaxWidth" Value="250" />
+        <Setter Property="MaxWidth" Value="248" />
        <Setter Property="Margin" Value="0,0,-16,0" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="VerticalAlignment" Value="Center" />
@ -462,7 +456,7 @@
                                               Text="{TemplateBinding HelpText}" />
                                </StackPanel>
                                <ContentPresenter Grid.Column="1"
-                                                  MaxWidth="250"
+                                                  MaxWidth="248"
                                                  Margin="0,0,-16,0"
                                                  HorizontalAlignment="Right"
                                                  VerticalAlignment="Center"