Fix: visually hidden text breaks delete button wrap (#4462)

diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
index 290581a4773ad0bdd2d56f437a1a94dd4f39c3fe..2b60ff9de2a629331170e1892c54ada0d79c8603 100644 (file)
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
@@ -12,9 +12,11 @@
         <span class="d-inline-block" style="padding-bottom: 1px;" >Cancel</span>
       </button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
-        {{btnCaption}}
+        <span>
+          {{btnCaption}}
+          <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
+        </span>
         <ngb-progressbar *ngIf="!confirmButtonEnabled" style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
-        <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
       </button>
       <button *ngIf="alternativeBtnCaption" type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
         {{alternativeBtnCaption}}