From 5f77904163ca66795da35702d9ab87b40345c31f Mon Sep 17 00:00:00 2001
From: jschick04 <jschick04@gmail.com>
Date: Tue, 12 May 2026 21:37:04 -0500
Subject: [PATCH] Right-align modal footer buttons and stack Settings extra row

---
 .../Base/ModalChrome.razor                        |  2 +-
 .../Base/ModalChrome.razor.cs                     |  6 ++++++
 .../Modals/SettingsModal.razor                    |  3 ++-
 src/EventLogExpert/wwwroot/css/app.css            | 15 ++++++++++++---
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/EventLogExpert.Components/Base/ModalChrome.razor b/src/EventLogExpert.Components/Base/ModalChrome.razor
index d5c2a6f9..58b59ff0 100644
--- a/src/EventLogExpert.Components/Base/ModalChrome.razor
+++ b/src/EventLogExpert.Components/Base/ModalChrome.razor
@@ -35,7 +35,7 @@
         <div class="footer-group" inert="@HasInlineAlert">
             @if (ExtraFooterContent is not null)
             {
-                <div class="footer-extra">
+                <div class="footer-extra@(StackFooterExtra ? " footer-extra-stacked" : null)">
                     @ExtraFooterContent
                 </div>
             }
diff --git a/src/EventLogExpert.Components/Base/ModalChrome.razor.cs b/src/EventLogExpert.Components/Base/ModalChrome.razor.cs
index 43556428..5d21b1d3 100644
--- a/src/EventLogExpert.Components/Base/ModalChrome.razor.cs
+++ b/src/EventLogExpert.Components/Base/ModalChrome.razor.cs
@@ -75,6 +75,12 @@ public sealed partial class ModalChrome : ComponentBase, IAsyncDisposable
 
     [Parameter] public bool ShowCloseButton { get; set; }
 
+    /// <summary>Opt the footer-extra slot into a full-width row above the action
+    /// buttons, instead of sharing the row with them. Use when the extra content
+    /// is a label/control pair that should align with the dialog body rather than
+    /// compete with the button row for horizontal space.</summary>
+    [Parameter] public bool StackFooterExtra { get; set; }
+
     [Parameter] public string? Title { get; set; }
 
     private string? DialogInlineStyle
diff --git a/src/EventLogExpert.Components/Modals/SettingsModal.razor b/src/EventLogExpert.Components/Modals/SettingsModal.razor
index 6ba76166..1633fd90 100644
--- a/src/EventLogExpert.Components/Modals/SettingsModal.razor
+++ b/src/EventLogExpert.Components/Modals/SettingsModal.razor
@@ -14,7 +14,8 @@
     OnInlineAlertResolved="HandleInlineAlertResolvedAsync"
     OnSave="OnSaveAsync"
     @ref="ChromeRef"
-    SaveLabel="Save">
+    SaveLabel="Save"
+    StackFooterExtra="true">
     <ChildContent>
         <div class="settings-form">
             <div class="flex-column-scroll">
diff --git a/src/EventLogExpert/wwwroot/css/app.css b/src/EventLogExpert/wwwroot/css/app.css
index 77c6db87..508537b5 100644
--- a/src/EventLogExpert/wwwroot/css/app.css
+++ b/src/EventLogExpert/wwwroot/css/app.css
@@ -162,17 +162,26 @@ html, body {
 
 .footer-group {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: flex-end;
     align-items: center;
     gap: 0.5rem;
 
     margin-top: .5rem;
 }
 
-    .footer-group.align-right { justify-content: flex-end; }
-
     .footer-group .footer-extra { flex: 1 1 auto; min-width: 0; }
 
+    /* Opt-in: force the extra slot onto its own full-width row so the action
+       buttons wrap to a second row beneath it. Used when the extra content is a
+       label/control pair that should align with the dialog body. */
+    .footer-group .footer-extra.footer-extra-stacked { flex: 0 0 100%; }
+
+    /* Preserve the "secondary actions on the left, primary on the right" split
+       used by FooterPreset.ImportExportClose. The non-final .button-group is
+       pushed left while the trailing primary button stays at flex-end. */
+    .footer-group > .button-group:not(:last-child) { margin-right: auto; }
+
 a { color: var(--clr-lightblue); }
 
 .spinner-border {