Repository: microsoft/terminal (language: cpp)

Issue:
SUI color palettes alignment
### Windows Terminal version

1.16.2641.0

### Windows build number

10.0.19044.0

### Other Software

_No response_

### Steps to reproduce

Open `Color schemes` in `Settings`

### Expected Behavior

Color palettes vertically alligned

### Actual Behavior

![wt_colors](https://user-images.githubusercontent.com/3933920/195167086-45f3c6f4-ef77-4852-a127-cacd37d18683.png)

Two columns, with color palettes in the 2nd column, might  look better.   Something like the `Command Palette` 


Discussion / hints:
_Uhh_..?!

<img width="859" alt="image" src="https://user-images.githubusercontent.com/189190/195170471-338fdfae-b2df-4ec1-a6da-ca90f96afd61.png">

I might need a bit more info from you on what you've got going on... 😁 
FYI I'm seeing the same thing. I'm sorry I meant to raise this before, but I completely forgot about it. Is it possibly a Windows 10 vs Windows 11 thing? I'm on version 10.0.19044.2006.

Also, in case it's relevant, I see a boat load of exceptions being logged if I'm running from within the debugger and I navigate to the _Color schemes_ page. Mostly something like this:

```
Microsoft.Terminal.Settings.Editor.dll!00007FFA279C6689: LogHr(339) tid(430c) 80004002 No such interface supported
Exception thrown at 0x00007FFAE3F54FD9 (KernelBase.dll) in WindowsTerminal.exe: WinRT originate error - 0x80004002 : 'No such interface supported'.
Exception thrown at 0x00007FFAE3F54FD9 in WindowsTerminal.exe: Microsoft C++ exception: winrt::hresult_no_interface at memory location 0x000000C21A356CB0.
Exception thrown at 0x00007FFAE3F54FD9 in WindowsTerminal.exe: Microsoft C++ exception: [rethrow] at memory location 0x0000000000000000.
Microsoft.Terminal.Settings.Editor.dll!00007FFA27A11AF6: ReturnHr(321) tid(430c) 80004002 No such interface supported
    Msg:[winrt::hresult_error: No such interface supported] 
```
Ohhhh no. That's not good.

/cc @PankajBhojwani 
Interestingly I get those types of exceptions no matter which page of the SUI I navigate to (though it does seem that _more_ of those get emitted for the ColorSchemes page) - perhaps it has something to do with our settingContainerStyle?

As for the misalignment, I'm going to need to try it on Windows 10 to see what's going on

Fix patch:
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index 0ab57e53d2e..83e5c3d0651 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -20,8 +20,8 @@
 
             <DataTemplate x:Key="ColorPreviewChipTemplate"
                           x:DataType="local:ColorTableEntry">
-                <Border Width="15"
-                        Height="15"
+                <Border Width="12"
+                        Height="12"
                         Background="{x:Bind local:Converters.ColorToBrush(Color)}"
                         CornerRadius="2" />
             </DataTemplate>
@@ -40,7 +40,6 @@
         <StackPanel Style="{StaticResource SettingsStackStyle}">
             <TextBlock x:Uid="ColorSchemesDisclaimer"
                        Style="{StaticResource DisclaimerStyle}" />
-
             <ListView x:Name="ColorSchemeListView"
                       MaxWidth="{StaticResource StandardControlMaxWidth}"
                       ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
@@ -55,31 +54,17 @@
                               Style="{StaticResource SchemeGridStyle}">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
-                            <TextBlock Grid.Column="0"
-                                       VerticalAlignment="Center"
-                                       Style="{StaticResource SettingsPageItemHeaderStyle}"
-                                       Text="{x:Bind Name, Mode=OneWay}" />
-                            <Border Grid.Column="1"
-                                    Margin="10,0,0,0"
-                                    Padding="2,0,2,0"
-                                    HorizontalAlignment="Left"
-                                    VerticalAlignment="Center"
-                                    Background="{ThemeResource SystemAltMediumLowColor}"
-                                    BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
-                                    BorderThickness="1"
-                                    CornerRadius="1"
-                                    Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
-                                <TextBlock x:Uid="ColorScheme_DefaultTag"
-                                           Grid.Column="1"
-                                           Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
-                            </Border>
-                            <Grid Grid.Column="2"
+                            <!--  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"
                                   VerticalAlignment="Center"
-                                  ColumnSpacing="4"
-                                  RowSpacing="4">
+                                  Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
+                                  ColumnSpacing="2"
+                                  CornerRadius="4"
+                                  RowSpacing="2">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="Auto" />
                                     <ColumnDefinition Width="Auto" />
@@ -95,99 +80,110 @@
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                 </Grid.RowDefinitions>
-                                <Border Grid.RowSpan="2"
-                                        Grid.Column="0"
-                                        Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
-                                        CornerRadius="2">
-                                    <TextBlock Padding="10,0,10,0"
-                                               HorizontalAlignment="Center"
-                                               VerticalAlignment="Center"
-                                               AutomationProperties.AccessibilityView="Raw"
-                                               FontFamily="Cascadia Code"
-                                               Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
-                                               Text="AaBbCc" />
-                                </Border>
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="1"
+                                                Grid.Column="0"
                                                 Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="2"
+                                                Grid.Column="1"
                                                 Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="3"
+                                                Grid.Column="2"
                                                 Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="4"
+                                                Grid.Column="3"
                                                 Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="5"
+                                                Grid.Column="4"
                                                 Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="6"
+                                                Grid.Column="5"
                                                 Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="7"
+                                                Grid.Column="6"
                                                 Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="0"
-                                                Grid.Column="8"
+                                                Grid.Column="7"
                                                 Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="1"
+                                                Grid.Column="0"
                                                 Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="2"
+                                                Grid.Column="1"
                                                 Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="3"
+                                                Grid.Column="2"
                                                 Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="4"
+                                                Grid.Column="3"
                                                 Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="5"
+                                                Grid.Column="4"
                                                 Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="6"
+                                                Grid.Column="5"
                                                 Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="7"
+                                                Grid.Column="6"
                                                 Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
                                 <ContentControl Grid.Row="1"
-                                                Grid.Column="8"
+                                                Grid.Column="7"
                                                 Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
                                                 ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
                                                 IsTabStop="False" />
+                                <TextBlock Grid.RowSpan="2"
+                                           Grid.Column="8"
+                                           Padding="10,0,10,0"
+                                           HorizontalAlignment="Center"
+                                           VerticalAlignment="Center"
+                                           AutomationProperties.AccessibilityView="Raw"
+                                           FontFamily="Cascadia Code"
+                                           Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
+                                           Text="{x:Bind Name, Mode=OneWay}" />
                             </Grid>
+                            <Border Grid.Column="1"
+                                    Margin="10,0,0,0"
+                                    Padding="2,0,2,0"
+                                    HorizontalAlignment="Left"
+                                    VerticalAlignment="Center"
+                                    Background="{ThemeResource SystemAltMediumLowColor}"
+                                    BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
+                                    BorderThickness="1"
+                                    CornerRadius="1"
+                                    Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
+                                <TextBlock x:Uid="ColorScheme_DefaultTag"
+                                           Grid.Column="1"
+                                           Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
+                            </Border>
                         </Grid>
                     </DataTemplate>
                 </ListView.ItemTemplate>


Test patch: