fix(ui): right-anchor license icons and delete button as one group in model modal

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;

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">',