Fit Images toggle: choose between blur-fit and crop-fill cards

Some users prefer the original UniformToFill behavior (sharper, edge-
to-edge fill — at the cost of cropping portrait images) over the new
blur-fit pattern. Add a "Fit Images" ToggleButton next to Hide Installed
and a CivArchiveBrowserFitCardImages setting (default true so the new
behavior is the out-of-box experience).

Card template now has three mutually-exclusive image layers chosen by
the parent VM's FitCardImages flag:
- Fit on (default): blurred UniformToFill background + Uniform foreground
- Fit off: single UniformToFill (original cropped fill)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mohnjiles

StabilityMatrix.Avalonia/ViewModels/CheckpointBrowser/CivArchiveBrowserViewModel.cs

@@ -56,6 +56,13 @@ IModelIndexService modelIndexService
     [ObservableProperty]
     private double resizeFactor = 1.0;
 
+    /// <summary>
+    /// True (default) renders card images in Fit mode (whole image visible with a blurred
+    /// edge-fill behind it). False switches to Fill mode (UniformToFill, may crop edges).
+    /// </summary>
+    [ObservableProperty]
+    private bool fitCardImages = true;
+
     public bool IsEndOfResults => HasSearched && TotalHits > 0 && rawResults.Count >= TotalHits;
 
     public bool HasResultCount => HasSearched && TotalHits > 0;
@@ -232,6 +239,15 @@ protected override async Task OnInitialLoadedAsync()
             )
         );
 
+        AddDisposable(
+            settingsManager.RelayPropertyFor(
+                this,
+                vm => vm.FitCardImages,
+                s => s.CivArchiveBrowserFitCardImages,
+                true
+            )
+        );
+
         EventHandler indexHandler = (_, _) => Dispatcher.UIThread.Post(OnLocalModelIndexChanged);
         EventManager.Instance.ModelIndexChanged += indexHandler;
         AddDisposable(Disposable.Create(() => EventManager.Instance.ModelIndexChanged -= indexHandler));

StabilityMatrix.Avalonia/Views/CivArchiveBrowserPage.axaml

@@ -135,14 +135,15 @@
                         <Grid Width="330" RowDefinitions="300,Auto">
                             <Grid ClipToBounds="True">
                                 <!--
-                                    Two-layer blur-fill so portrait images aren't cropped (Uniform on the
-                                    foreground keeps the whole image visible) but we don't get letterbox
-                                    bars either (the same image, blurred and UniformToFilled, fills the
-                                    leftover space behind it).
+                                    Three image layers, mutually-exclusive based on the FitCardImages
+                                    toggle on the parent VM:
+                                    • Fit mode (default): blurred UniformToFill background +
+                                    Uniform foreground (whole image visible, no letterbox).
+                                    • Fill mode: single UniformToFill (may crop edges, original).
                                 -->
                                 <controls:BetterAdvancedImage
                                     CornerRadius="8"
-                                    IsVisible="{Binding ImageUrl, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
+                                    IsVisible="{Binding $parent[scroll:BetterScrollViewer].((checkpointBrowser:CivArchiveBrowserViewModel)DataContext).FitCardImages, FallbackValue=True, TargetNullValue=True}"
                                     Source="{Binding ImageUrl}"
                                     Stretch="UniformToFill">
                                     <controls:BetterAdvancedImage.Effect>
@@ -151,9 +152,14 @@
                                 </controls:BetterAdvancedImage>
                                 <controls:BetterAdvancedImage
                                     CornerRadius="8"
-                                    IsVisible="{Binding ImageUrl, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
+                                    IsVisible="{Binding $parent[scroll:BetterScrollViewer].((checkpointBrowser:CivArchiveBrowserViewModel)DataContext).FitCardImages, FallbackValue=True, TargetNullValue=True}"
                                     Source="{Binding ImageUrl}"
                                     Stretch="Uniform" />
+                                <controls:BetterAdvancedImage
+                                    CornerRadius="8"
+                                    IsVisible="{Binding !$parent[scroll:BetterScrollViewer].((checkpointBrowser:CivArchiveBrowserViewModel)DataContext).FitCardImages, FallbackValue=False, TargetNullValue=False}"
+                                    Source="{Binding ImageUrl}"
+                                    Stretch="UniformToFill" />
 
                                 <!--  Placeholder when no image  -->
                                 <Border Background="{DynamicResource ControlAltFillColorSecondaryBrush}" IsVisible="{Binding ImageUrl, Converter={x:Static StringConverters.IsNullOrEmpty}}">
@@ -768,6 +774,24 @@
                     </ToggleButton>
                 </StackPanel>
 
+                <!--  Fit Images toggle: on = whole image with blurred edge fill, off = crop to fill  -->
+                <StackPanel Margin="0,0,4,4" Spacing="2">
+                    <TextBlock
+                        Margin="2,0,0,0"
+                        FontSize="11"
+                        Opacity="0"
+                        Text="." />
+                    <ToggleButton IsChecked="{Binding FitCardImages, Mode=TwoWay}" ToolTip.Tip="Fit: show whole image with blurred edges. Off: crop to fill (may cut off content).">
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <fa:Icon
+                                VerticalAlignment="Center"
+                                FontSize="12"
+                                Value="fa-solid fa-image" />
+                            <TextBlock VerticalAlignment="Center" Text="Fit Images" />
+                        </StackPanel>
+                    </ToggleButton>
+                </StackPanel>
+
                 <!--  Reset filters  -->
                 <StackPanel Margin="0,0,0,4" Spacing="2">
                     <TextBlock

StabilityMatrix.Core/Models/Settings/Settings.cs

@@ -252,6 +252,8 @@ public IReadOnlyDictionary<string, string> EnvironmentVariables
 
     public double CivArchiveBrowserResizeFactor { get; set; } = 1.0d;
 
+    public bool CivArchiveBrowserFitCardImages { get; set; } = true;
+
     public bool HideEarlyAccessModels { get; set; }
 
     public bool CivitUseDiscoveryApi { get; set; }