Fix text scaling issues in settings UI (#17910)

## Summary of the Pull Request
Fixes some issues with truncated text in the settings UI when 200% text
scaling is applied.

For #17897, a minimum height was applied instead of a plain "height".
This ensures that the desired height is applied in general, but under
200% text scaling, we are allowed to grow past that, thus preventing the
truncation of the text.

For #17898, flyouts have a scroll viewer inside them by default. We
actually don't want the scroll viewer because that means the text will
appear "truncated" when in reality, the user is expected to notice the
small scrollbar and scroll horizontally (why that's the default, I will
never know). This PR introduces a new style that can be applied to these
flyouts to cause text wrapping instead of horizontal scrolling. Looked
through the app for any instances where this happens.

For #12006, simply changing the column width from a static value to
"auto" fixes the issue. Frankly, we care more about the text appearing
as a whole (and as whole words). The name of the actions wrap properly
anyways.

Closes #17897
Closes #17898
Closes #12006

(cherry picked from commit a7e47b711a)
Service-Card-Id: PVTI_lADOAF3p4s4AmhmszgTEfj0
Service-Version: 1.21

src/cascadia/TerminalSettingsEditor/Actions.xaml

@@ -178,7 +178,7 @@
                             <!--  command name  -->
                             <ColumnDefinition Width="*" />
                             <!--  key chord  -->
-                            <ColumnDefinition Width="150" />
+                            <ColumnDefinition Width="auto" />
                             <!--  edit buttons  -->
                             <!--
                                 This needs to be 112 because that is the width of the row of buttons in edit mode + padding.
@@ -307,7 +307,7 @@
                                               Glyph="&#xE74D;" />
                                 </Button.Content>
                                 <Button.Flyout>
-                                    <Flyout>
+                                    <Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}">
                                         <StackPanel>
                                             <TextBlock x:Uid="Actions_DeleteConfirmationMessage"
                                                        Style="{StaticResource CustomFlyoutTextStyle}" />

src/cascadia/TerminalSettingsEditor/ActionsViewModel.cpp

@@ -289,14 +289,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 // Display a confirmation dialog.
                 TextBlock errorMessageTB{};
                 errorMessageTB.Text(RS_(L"Actions_RenameConflictConfirmationMessage"));
+                errorMessageTB.TextWrapping(TextWrapping::Wrap);
 
                 const auto conflictingCmdName{ conflictingCmd.Name() };
                 TextBlock conflictingCommandNameTB{};
                 conflictingCommandNameTB.Text(fmt::format(L"\"{}\"", conflictingCmdName.empty() ? RS_(L"Actions_UnnamedCommandName") : conflictingCmdName));
                 conflictingCommandNameTB.FontStyle(Windows::UI::Text::FontStyle::Italic);
+                conflictingCommandNameTB.TextWrapping(TextWrapping::Wrap);
 
                 TextBlock confirmationQuestionTB{};
                 confirmationQuestionTB.Text(RS_(L"Actions_RenameConflictConfirmationQuestion"));
+                confirmationQuestionTB.TextWrapping(TextWrapping::Wrap);
 
                 Button acceptBTN{};
                 acceptBTN.Content(box_value(RS_(L"Actions_RenameConflictConfirmationAcceptButton")));
@@ -320,7 +323,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 flyoutStack.Children().Append(confirmationQuestionTB);
                 flyoutStack.Children().Append(acceptBTN);
 
+                // This should match CustomFlyoutPresenterStyle in CommonResources.xaml!
+                // We don't have access to those resources here, so it's easier to just copy them over.
+                // This allows the flyout text to wrap
+                Style acceptChangesFlyoutStyle{ winrt::xaml_typename<FlyoutPresenter>() };
+                Setter horizontalScrollModeStyleSetter{ ScrollViewer::HorizontalScrollModeProperty(), box_value(ScrollMode::Disabled) };
+                Setter horizontalScrollBarVisibilityStyleSetter{ ScrollViewer::HorizontalScrollBarVisibilityProperty(), box_value(ScrollBarVisibility::Disabled) };
+                acceptChangesFlyoutStyle.Setters().Append(horizontalScrollModeStyleSetter);
+                acceptChangesFlyoutStyle.Setters().Append(horizontalScrollBarVisibilityStyleSetter);
+
                 Flyout acceptChangesFlyout{};
+                acceptChangesFlyout.FlyoutPresenterStyle(acceptChangesFlyoutStyle);
                 acceptChangesFlyout.Content(flyoutStack);
                 senderVM.AcceptChangesFlyout(acceptChangesFlyout);
             }

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

@@ -115,7 +115,7 @@
     <!--  Used for disclaimers  -->
     <Style x:Key="DisclaimerStyle"
            TargetType="TextBlock">
-        <Setter Property="TextWrapping" Value="WrapWholeWords" />
+        <Setter Property="TextWrapping" Value="Wrap" />
         <Setter Property="MaxWidth" Value="1000" />
     </Style>
 
@@ -125,6 +125,14 @@
            TargetType="TextBlock">
         <Setter Property="FontWeight" Value="Bold" />
         <Setter Property="Margin" Value="0,0,0,10" />
+        <Setter Property="TextWrapping" Value="Wrap" />
+    </Style>
+
+    <!--  Used for the flyout itself. Removes scroll bar to allow for text wrapping.  -->
+    <Style x:Key="CustomFlyoutPresenterStyle"
+           TargetType="FlyoutPresenter">
+        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
     </Style>
 
     <!--  Number Box  -->
@@ -145,7 +153,7 @@
            BasedOn="{StaticResource BaseButtonStyle}"
            TargetType="Button">
         <Setter Property="Margin" Value="10,0,0,0" />
-        <Setter Property="Height" Value="33" />
+        <Setter Property="MinHeight" Value="33" />
     </Style>
 
     <!--  Delete button based on Accent button template  -->

src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml

@@ -488,7 +488,7 @@
                     </StackPanel>
                 </Button.Content>
                 <Button.Flyout>
-                    <Flyout>
+                    <Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}">
                         <StackPanel>
                             <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
                                        Style="{StaticResource CustomFlyoutTextStyle}" />