UI: Widen compatibility list, and make search box take up all space horizontally

src/Ryujinx/Ryujinx.csproj

@@ -169,8 +169,8 @@
     <AdditionalFiles Include="Assets\locales.json" />
   </ItemGroup>
   <ItemGroup>
-    <Compile Update="Utilities\Compat\CompatibilityList.axaml.cs">
+    <Compile Update="Utilities\Compat\CompatibilityContentDialog.axaml.cs">
-      <DependentUpon>CompatibilityList.axaml</DependentUpon>
+      <DependentUpon>CompatibilityContentDialog.axaml</DependentUpon>
       <SubType>Code</SubType>
     </Compile>
   </ItemGroup>

src/Ryujinx/UI/Views/Main/MainMenuBarView.axaml.cs

@@ -227,6 +227,6 @@ namespace Ryujinx.Ava.UI.Views.Main
 
         public void CloseWindow(object sender, RoutedEventArgs e) => Window.Close();
 
-        private async void OpenCompatibilityList(object sender, RoutedEventArgs e) => await CompatibilityList.Show();
+        private async void OpenCompatibilityList(object sender, RoutedEventArgs e) => await CompatibilityContentDialog.Show();
     }
 }

src/Ryujinx/Utilities/Compat/CompatibilityContentDialog.axaml

@@ -0,0 +1,20 @@
+<ui:ContentDialog xmlns="https://github.com/avaloniaui"
+                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                  xmlns:local="using:Ryujinx.Ava.Utilities.Compat"
+                  xmlns:ui="using:FluentAvalonia.UI.Controls"
+                  xmlns:ext="using:Ryujinx.Ava.Common.Markup"
+                  x:Class="Ryujinx.Ava.Utilities.Compat.CompatibilityContentDialog"
+                  mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="400"
+                  CloseButtonText="{ext:Locale SettingsButtonClose}" 
+                  DefaultButton="Close"
+                  x:DataType="local:CompatibilityViewModel">
+    <ui:ContentDialog.DataContext>
+        <local:CompatibilityViewModel/>
+    </ui:ContentDialog.DataContext>
+    <ui:ContentDialog.Resources>
+        <x:Double x:Key="ContentDialogMaxWidth">900</x:Double>
+    </ui:ContentDialog.Resources>
+</ui:ContentDialog>
+

src/Ryujinx/Utilities/Compat/CompatibilityContentDialog.axaml.cs

@@ -0,0 +1,37 @@
+using Avalonia.Styling;
+using FluentAvalonia.UI.Controls;
+using Ryujinx.Ava.UI.Helpers;
+using System;
+using System.Threading.Tasks;
+
+namespace Ryujinx.Ava.Utilities.Compat
+{
+    public partial class CompatibilityContentDialog : ContentDialog
+    {
+        protected override Type StyleKeyOverride => typeof(ContentDialog);
+
+        public static async Task Show()
+        {
+            await CompatibilityHelper.InitAsync();
+
+            CompatibilityContentDialog contentDialog = new()
+            {
+                Content = new CompatibilityList { DataContext = new CompatibilityViewModel(RyujinxApp.MainWindow.ViewModel.ApplicationLibrary) }
+            };
+
+            Style closeButton = new(x => x.Name("CloseButton"));
+            closeButton.Setters.Add(new Setter(WidthProperty, 80d));
+            
+            Style closeButtonParent = new(x => x.Name("CommandSpace"));
+            closeButtonParent.Setters.Add(new Setter(HorizontalAlignmentProperty, Avalonia.Layout.HorizontalAlignment.Right));
+
+            contentDialog.Styles.Add(closeButton);
+            contentDialog.Styles.Add(closeButtonParent);
+
+            await ContentDialogHelper.ShowAsync(contentDialog);
+        }
+        
+        public CompatibilityContentDialog() => InitializeComponent();
+    }
+}
+

src/Ryujinx/Utilities/Compat/CompatibilityList.axaml

@@ -11,25 +11,24 @@
     <UserControl.DataContext>
         <local:CompatibilityViewModel />
     </UserControl.DataContext>
-    <StackPanel Orientation="Vertical">
+    <Grid RowDefinitions="Auto,*">
-        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+        <Grid Grid.Row="0" ColumnDefinitions="*,Auto,Auto">
-            <TextBox Watermark="{ext:Locale CompatibilityListSearchBoxWatermark}" TextChanged="TextBox_OnTextChanged" />
+            <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Watermark="{ext:Locale CompatibilityListSearchBoxWatermark}" TextChanged="TextBox_OnTextChanged" />
-            <CheckBox Margin="7, 0, 0, 0" IsChecked="{Binding OnlyShowOwnedGames}" />
+            <CheckBox Grid.Column="1" Margin="7, 0, 0, 0" IsChecked="{Binding OnlyShowOwnedGames}" />
-            <TextBlock Margin="-3, 0, 0, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
+            <TextBlock Grid.Column="2" Margin="-10, 0, 0, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
-        </StackPanel>
+        </Grid>
-        <ScrollViewer>
+        <ScrollViewer Grid.Row="1">
-                <ListBox Margin="5"
+                <ListBox Margin="0,5, 0, 0"
-                         Padding="10"
                          Background="Transparent"
                          ItemsSource="{Binding CurrentEntries}">
                     <ListBox.ItemTemplate>
                         <DataTemplate DataType="{x:Type local:CompatibilityEntry}">
-                            <Grid HorizontalAlignment="Center" Width="500" ColumnDefinitions="Auto,Auto,Auto,*"
+                            <Grid Width="750" ColumnDefinitions="Auto,Auto,Auto,*"
                                   Margin="5">
                                 <TextBlock Grid.Column="0"
                                            FontFamily="{StaticResource JetBrainsMono}"
                                            Text="{Binding GameName}"
-                                           Width="140"
+                                           Width="333"
                                            TextWrapping="Wrap" />
                                 <TextBlock Grid.Column="1"
                                            Width="135"
@@ -55,5 +54,5 @@
                     </ListBox.ItemTemplate>
                 </ListBox>
         </ScrollViewer>
-    </StackPanel>
+    </Grid>
 </UserControl>

src/Ryujinx/Utilities/Compat/CompatibilityList.axaml.cs

@@ -1,41 +1,9 @@
-using Avalonia;
+using Avalonia.Controls;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using Avalonia.Styling;
-using FluentAvalonia.UI.Controls;
-using Ryujinx.Ava.Common.Locale;
-using Ryujinx.Ava.UI.Helpers;
-using Ryujinx.Ava.UI.Windows;
-using System.Threading.Tasks;
 
 namespace Ryujinx.Ava.Utilities.Compat
 {
     public partial class CompatibilityList : UserControl
     {
-        public static async Task Show()
-        {
-            await CompatibilityHelper.InitAsync();
-            
-            ContentDialog contentDialog = new()
-            {
-                PrimaryButtonText = string.Empty,
-                SecondaryButtonText = string.Empty,
-                CloseButtonText = LocaleManager.Instance[LocaleKeys.SettingsButtonClose],
-                Content = new CompatibilityList { DataContext = new CompatibilityViewModel(RyujinxApp.MainWindow.ViewModel.ApplicationLibrary) }
-            };
-
-            Style closeButton = new(x => x.Name("CloseButton"));
-            closeButton.Setters.Add(new Setter(WidthProperty, 80d));
-
-            Style closeButtonParent = new(x => x.Name("CommandSpace"));
-            closeButtonParent.Setters.Add(new Setter(HorizontalAlignmentProperty, Avalonia.Layout.HorizontalAlignment.Right));
-
-            contentDialog.Styles.Add(closeButton);
-            contentDialog.Styles.Add(closeButtonParent);
-
-            await ContentDialogHelper.ShowAsync(contentDialog);
-        }
-        
         public CompatibilityList()
         {
             InitializeComponent();
@@ -53,4 +21,3 @@ namespace Ryujinx.Ava.Utilities.Compat
         }
     }
 }
-