[Settings] Fix Quick Accent language list being cropped and not reflowing contents

src/settings-ui/Settings.UI/SettingsXAML/Views/PowerAccentPage.xaml

@@ -70,7 +70,12 @@
                             IsThreeState="True"
                             Unchecked="QuickAccent_SelectedLanguage_UnselectAll" />
                         <tkcontrols:SettingsExpander.Items>
-                            <tkcontrols:SettingsCard>
+                            <tkcontrols:SettingsCard
+                                x:Name="LanguageSettingsCard"
+                                HorizontalContentAlignment="Stretch"
+                                ContentAlignment="Left"
+                                Loaded="LanguageSettingsCard_Loaded"
+                                SizeChanged="LanguageSettingsCard_SizeChanged">
                                 <ListView
                                     x:Name="QuickAccent_Language_Select"
                                     MinWidth="{StaticResource SettingActionControlMinWidth}"
@@ -80,22 +85,18 @@
                                     ItemTemplate="{StaticResource LanguageViewTemplate}"
                                     ItemsSource="{x:Bind LanguagesCustomViewSource.View, Mode=OneWay}"
                                     Loaded="QuickAccent_Language_Select_Loaded"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Visible"
-                                    ScrollViewer.HorizontalScrollMode="Enabled"
-                                    ScrollViewer.VerticalScrollBarVisibility="Visible"
-                                    ScrollViewer.VerticalScrollMode="Enabled"
+                                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
+                                    ScrollViewer.VerticalScrollMode="Disabled"
                                     SelectionChanged="QuickAccent_SelectedLanguage_SelectionChanged"
                                     SelectionMode="Multiple">
                                     <ListView.ItemsPanel>
                                         <ItemsPanelTemplate>
-                                            <ItemsWrapGrid
-                                                MaxWidth="{Binding ElementName=QuickAccent_Language, Path=ActualWidth}"
-                                                ItemWidth="280"
-                                                Orientation="Horizontal" />
+                                            <ItemsWrapGrid ItemWidth="280" Orientation="Horizontal" />
                                         </ItemsPanelTemplate>
                                     </ListView.ItemsPanel>
                                     <ListView.ItemContainerStyle>
                                         <Style TargetType="ListViewItem">
+                                            <Setter Property="Width" Value="280" />
                                             <Setter Property="Template">
                                                 <Setter.Value>
                                                     <ControlTemplate TargetType="ListViewItem">

src/settings-ui/Settings.UI/SettingsXAML/Views/PowerAccentPage.xaml.cs

@@ -91,5 +91,26 @@ private void QuickAccent_Language_Select_Loaded(object sender, RoutedEventArgs e
 
             loadingLanguageListDontTriggerSelectionChanged = false;
         }
+
+        private void LanguageSettingsCard_Loaded(object sender, RoutedEventArgs e)
+        {
+            UpdateLanguageListMaxWidth(sender as Control);
+        }
+
+        private void LanguageSettingsCard_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            UpdateLanguageListMaxWidth(sender as Control);
+        }
+
+        private void UpdateLanguageListMaxWidth(Control card)
+        {
+            if (card is null)
+            {
+                return;
+            }
+
+            QuickAccent_Language_Select.MaxWidth =
+                card.ActualWidth - card.Padding.Left - card.Padding.Right;
+        }
     }
 }