From ec47c0f11dde2d40b6e67cdc6881d8096339511c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 3 Nov 2026 09:37:15 -0800
Subject: [PATCH] Fix: mobile save button display obsessing (#14676)

---
 .../document-detail/document-detail.component.html    | 11 ++++++-----
 .../document-detail/document-detail.component.scss    |  9 +++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 1eb1b45b21..00267e76d7 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -436,21 +436,22 @@
 </div>
 
 <ng-template #saveButtons>
+  @let saveDisabled = !userCanEdit || networkActive() || (isDirty$ | async) !== true;
   <div class="btn-group">
     <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-      <button type="submit" class="order-3 btn btn-sm btn-primary" title="Save" i18n-title [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">
+      <button type="submit" class="order-3 btn btn-sm" [class.btn-primary]="!saveDisabled" [class.btn-outline-primary]="saveDisabled" title="Save" i18n-title [disabled]="saveDisabled">
         <pngx-bs-icon class="d-md-none" width="1.2em" height="1.2em" name="floppy"></pngx-bs-icon><span class="d-none d-md-inline" i18n>Save</span>
       </button>
       @if (hasNext()) {
-        <button type="button" class="order-1 btn btn-sm btn-outline-primary d-none d-md-inline-block" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Save &amp; next</button>
+        <button type="button" class="order-1 btn btn-sm btn-outline-primary d-none d-md-inline-block" (click)="saveEditNext()" i18n [disabled]="saveDisabled">Save &amp; next</button>
       } @else {
-        <button type="button" class="order-2 btn btn-sm btn-outline-primary d-none d-md-inline-block" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">Save &amp; close</button>
+        <button type="button" class="order-2 btn btn-sm btn-outline-primary d-none d-md-inline-block" (click)="save(true)" i18n [disabled]="saveDisabled">Save &amp; close</button>
       }
-      <button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" title="Discard" i18n-title [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true">
+      <button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" title="Discard" i18n-title [disabled]="saveDisabled">
         <pngx-bs-icon class="d-md-none" width="1.2em" height="1.2em" name="arrow-counterclockwise"></pngx-bs-icon><span class="d-none d-md-inline" i18n>Discard</span>
       </button>
       <div class="btn-group order-4 d-md-none" ngbDropdown placement="bottom-end top-end" role="group">
-        <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split" ngbDropdownToggle aria-label="More save options" i18n-aria-label [disabled]="!userCanEdit || networkActive() || (isDirty$ | async) !== true"></button>
+        <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split" ngbDropdownToggle aria-label="More save options" i18n-aria-label [disabled]="saveDisabled"></button>
         <div class="dropdown-menu shadow" ngbDropdownMenu>
           @if (hasNext()) {
             <button type="button" ngbDropdownItem (click)="saveEditNext()" i18n>Save &amp; next</button>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index 3d7f6c5bb6..3fecdf443d 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -54,7 +54,16 @@ textarea.rtl {
   border-color: var(--bs-border-color);
 }
 
+// save buttons are visually reordered with order-*, fix btn-group border overlap here
+.btn-group > .order-1,
+.btn-group > .order-2,
+.btn-group > .order-3,
+.btn-group > .order-4 {
+  margin-left: calc(-1 * var(--bs-border-width));
+}
+
 .btn-group .btn.order-0 {
+  margin-left: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-left-radius: var(--bs-border-radius-sm);