From 84a33afb8c4eb361c0b24d41dd2c75ba13b0587d Mon Sep 17 00:00:00 2001
From: Carlos Zamora <carlos.zamora@microsoft.com>
Date: Tue, 17 Sep 2024 10:45:59 -0700
Subject: [PATCH] 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 a7e47b711a2adc7b9e80eddea8168089f7d3b11e)
Service-Card-Id: PVTI_lADOAF3p4s4AmhmszgTEfj0
Service-Version: 1.21
---
 src/cascadia/TerminalSettingsEditor/Actions.xaml    |  4 ++--
 .../TerminalSettingsEditor/ActionsViewModel.cpp     | 13 +++++++++++++
 .../TerminalSettingsEditor/CommonResources.xaml     | 12 ++++++++++--
 .../TerminalSettingsEditor/EditColorScheme.xaml     |  2 +-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/Actions.xaml b/src/cascadia/TerminalSettingsEditor/Actions.xaml
index 600ec4329d9..5eb09daf421 100644
--- a/src/cascadia/TerminalSettingsEditor/Actions.xaml
+++ b/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}" />
diff --git a/src/cascadia/TerminalSettingsEditor/ActionsViewModel.cpp b/src/cascadia/TerminalSettingsEditor/ActionsViewModel.cpp
index a8f22f0212f..70e8f3891f0 100644
--- a/src/cascadia/TerminalSettingsEditor/ActionsViewModel.cpp
+++ b/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);
             }
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index 509e1782c29..7f2f3446bf2 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/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  -->
diff --git a/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml b/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
index 1279123c4ef..2c2ed3de5d4 100644
--- a/src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
+++ b/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}" />