From 40f922b0e8ab20834bda27a846031f652dfda1ab Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Mon, 24 Aug 2026 11:39:17 +0800
Subject: [PATCH] fix(ui): right-anchor license icons and delete button as one
 group in model modal

---
 .../css/components/lora-modal/lora-modal.css  | 24 ++++++++++++++-----
 static/js/components/shared/ModelModal.js     | 12 ++++------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/static/css/components/lora-modal/lora-modal.css b/static/css/components/lora-modal/lora-modal.css
index a5e80656..51c1c60b 100644
--- a/static/css/components/lora-modal/lora-modal.css
+++ b/static/css/components/lora-modal/lora-modal.css
@@ -68,9 +68,9 @@
     font-size: 14px;
 }
 
-/* Destructive modal action: ghost icon button pushed to the far right of the
-   header actions row, revealing the danger color only on hover/focus. Shared
-   by the model modal and the recipe modal. */
+/* Destructive modal action: ghost icon button right-anchored by its own auto
+   margin, revealing the danger color only on hover/focus. Shared by the model
+   modal and the recipe modal. */
 .modal-delete-btn {
     display: inline-flex;
     align-items: center;
@@ -98,9 +98,21 @@
     font-size: 14px;
 }
 
-/* License icons no longer carry their own auto margin: the delete button's
-   margin-left: auto right-anchors the [delete][license] cluster, keeping the
-   icons flush against the right edge as before the delete button existed. */
+/* When license icons directly precede the delete button, they carry the auto
+   margin instead, so the [license][delete] cluster stays right-anchored as
+   one group with the delete button flush at the right edge and no split gap. */
+.modal-header-actions .license-restrictions {
+    margin-left: auto;
+}
+
+.modal-header-actions .license-permissions {
+    margin-left: auto;
+}
+
+.modal-header-actions .license-restrictions + .modal-delete-btn,
+.modal-header-actions .license-permissions + .modal-delete-btn {
+    margin-left: 0;
+}
 
 .license-restrictions {
     display: flex;
diff --git a/static/js/components/shared/ModelModal.js b/static/js/components/shared/ModelModal.js
index c9e36c14..4021b9fb 100644
--- a/static/js/components/shared/ModelModal.js
+++ b/static/js/components/shared/ModelModal.js
@@ -442,10 +442,12 @@ export async function showModelModal(model, modelType) {
     if (creatorActionsMarkup) {
         headerActionItems.push(creatorActionsMarkup);
     }
+    if (licenseIcons) {
+        headerActionItems.push(indentMarkup(licenseIcons.trim(), 20));
+    }
 
-    // Destructive action docks immediately left of the license icons so the
-    // icons keep their original rightmost position; the delete button's
-    // auto margin right-anchors the whole cluster.
+    // Destructive action stays last (rightmost). The license icons' auto
+    // margin right-anchors the [license][delete] cluster as one group.
     const deleteModelTitle = translate('modals.model.actions.deleteModelWithShortcut', {}, 'Delete model (Del)');
     const deleteModelButton = `
         <button class="modal-delete-btn" data-action="delete-model" title="${deleteModelTitle}" aria-label="${deleteModelTitle}">
@@ -454,10 +456,6 @@ export async function showModelModal(model, modelType) {
     `.trim();
     headerActionItems.push(indentMarkup(deleteModelButton, 20));
 
-    if (licenseIcons) {
-        headerActionItems.push(indentMarkup(licenseIcons.trim(), 20));
-    }
-
     const headerActionsMarkup = headerActionItems.length
         ? [
             '                <div class="modal-header-actions">',