Repository: microsoft/terminal (language: cpp)

Issue:
[Settings> Actions]: At 200% resize Text, Shortcut keys (Ctrl+numpad_minus & Ctrl+numpad_plus) are not fully visible inside Actions page.
### Windows Terminal version

1.12.3472.0

### Windows build number

10.0.22504.1010

### Other Software

Test Environment:
OS: Windows 11 Version Dev (OS Build 22504.1010)
App: Windows Terminal Preview
Screen Reader: Narrator
Tool: Accessibility Insights for Windows Version 1.1.1741.1

### Steps to reproduce

**Pre-requisites:**
1. Navigate to Settings>System> Dispaly.
2. Then Set Display Rsolution to 1280 x 768 and Scale at 100%.
3. Then Navigate to Settings>Accessibility>Text Size
4. Apply 200% text resize. 

**Repro Steps:**
1. Open Windows Terminal.
2. Open Settings page using 'Ctr+,'.
3. Then navigate inside Actions page and observe the issue.

**User Experience:**
Low vision users UX will not able good if they are not able to see the full text.

**Guideline Reference:**
https://www.w3.org/WAI/WCAG21/Understanding/resize-text

**Attachments:**
[At 200 resize Text, Shortcut keys are not fully visible inside Actions page..zip](https://github.com/microsoft/terminal/files/7750395/At.200.resize.Text.Shortcut.keys.are.not.fully.visible.inside.Actions.page.zip)


### Expected Behavior

At 200% resize Text, Shortcut keys (Ctrl+numpad_minus & Ctrl+numpad_plus) should be fully visible inside Actions page.

### Actual Behavior

At 200% resize Text, Shortcut keys (Ctrl+numpad_minus & Ctrl+numpad_plus) are not fully visible inside Actions page. User is only able to see 'Ctrl+numpad_mi' & 'Ctrl+numpad_pl'.

**Observation:** User can see full shortcut text in Shortcut editable mode.


Discussion / hints:

Fix patch:
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}" />


Test patch: