Fix missing icon and truncated text on NullableColorPicker (#18476)

Fixes an issue on Windows 10 where icon on selected color chips would be
missing in the NullableColorPicker.

Fixes (or at least significantly improves the experience) text being
truncated for the special colors in the NullableColorPicker. This was
done by removing the word "Use" from the labels and adding a visual
state trigger to change the layout of the chips and buttons when the
window becomes narrow.

Related to #18318

(cherry picked from commit 7423dd3b2a8726631f1c4c0a0c7b5f9fcd7def08)
Service-Card-Id: PVTI_lADOAF3p4s4AxadtzgXARtg
Service-Version: 1.23

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

@@ -467,7 +467,7 @@
                                 <FontIcon Margin="0,0,-1,-1"
                                           HorizontalAlignment="Right"
                                           VerticalAlignment="Bottom"
-                                          FontFamily="Segoe Fluent Icons"
+                                          FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets"
                                           FontSize="12"
                                           Foreground="{TemplateBinding BorderBrush}"
                                           Glyph="&#xE73D;"

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

@@ -94,12 +94,9 @@
         </ResourceDictionary>
     </UserControl.Resources>
 
-    <Grid ColumnSpacing="5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-        </Grid.ColumnDefinitions>
-
+    <StackPanel x:Name="ContentStackPanel"
+                Orientation="Horizontal"
+                Spacing="5">
         <ContentDialog x:Name="ColorPickerDialog"
                        x:Uid="NullableColorPicker_ColorPickerContentDialog"
                        DefaultButton="Primary"
@@ -119,12 +116,14 @@
                               Orientation="Horizontal" />
         </ContentDialog>
 
-        <ContentPresenter Grid.Column="0"
-                          Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
+        <ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
                           ContentTemplate="{StaticResource ColorSchemeTemplate}" />
 
-        <StackPanel Grid.Column="1"
-                    Spacing="5">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <StackPanel Spacing="5">
                 <ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
                               Click="NullColorButton_Clicked"
                               IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
@@ -152,4 +151,26 @@
             </StackPanel>
         </Grid>
 
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState x:Name="Narrow">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="ContentStackPanel.Orientation" Value="Vertical" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="Wide">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="600" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="ContentStackPanel.Orientation" Value="Horizontal" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </StackPanel>
+
 </UserControl>

src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw

@@ -2033,19 +2033,19 @@
     <comment>Text label for secondary button the color picker content dialog. When clicked, the operation of selecting a color is cancelled by the user.</comment>
   </data>
   <data name="Profile_CursorColor_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
-    <value>Use cursor color from color scheme</value>
+    <value>Use scheme color</value>
     <comment>Label for a button directing the user to use the cursor color defined in the terminal's current color scheme.</comment>
   </data>
   <data name="Profile_Foreground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
-    <value>Use foreground color from color scheme</value>
+    <value>Use scheme color</value>
     <comment>Label for a button directing the user to use the foreground color defined in the terminal's current color scheme.</comment>
   </data>
   <data name="Profile_Background_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
-    <value>Use background color from color scheme</value>
+    <value>Use scheme color</value>
     <comment>Label for a button directing the user to use the background color defined in the terminal's current color scheme.</comment>
   </data>
   <data name="Profile_SelectionBackground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
-    <value>Use selection background color from color scheme</value>
+    <value>Use scheme color</value>
     <comment>Label for a button directing the user to use the selection background color defined in the terminal's current color scheme.</comment>
   </data>
   <data name="Profile_IconTypeNone" xml:space="preserve">