Fix horizontal labels should stay centered to field on error

src-ui/src/app/components/common/input/date/date.component.html

@@ -1,4 +1,4 @@
-<div class="mb-3">
+<div class="mb-3" [class.pb-3]="error">
   <div class="row">
     <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
       <label class="form-label mb-md-0" [for]="inputId">{{title}}</label>
@@ -8,7 +8,7 @@
         </svg>&nbsp;<ng-container i18n>Remove</ng-container>
       </button>
     </div>
-    <div [class.col-md-9]="horizontal">
+    <div class="position-relative" [class.col-md-9]="horizontal">
       <div class="input-group" [class.is-invalid]="error">
         <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
               (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
@@ -24,7 +24,7 @@
           </svg>
         </button>
       </div>
-      <div class="invalid-feedback" i18n>Invalid date.</div>
+      <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</div>
       <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
       <small *ngIf="getSuggestions().length > 0">
         <span i18n>Suggestions:</span>&nbsp;

src-ui/src/app/components/common/input/number/number.component.html

@@ -1,4 +1,4 @@
-<div class="mb-3">
+<div class="mb-3" [class.pb-3]="error">
   <div class="row">
     <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
       <label class="form-label mb-md-0" [for]="inputId">{{title}}</label>
@@ -8,12 +8,12 @@
         </svg>&nbsp;<ng-container i18n>Remove</ng-container>
       </button>
     </div>
-    <div [class.col-md-9]="horizontal">
+    <div class="position-relative" [class.col-md-9]="horizontal">
       <div class="input-group" [class.is-invalid]="error">
         <input #inputField type="number" class="form-control" [step]="step" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
         <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
       </div>
-      <div class="invalid-feedback">
+      <div class="invalid-feedback position-absolute top-100">
         {{error}}
       </div>
       <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,9 +1,9 @@
-<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled">
+<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="suggestions">
   <div class="row">
     <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
       <label class="form-label mb-md-0" for="tags" i18n>{{title}}</label>
     </div>
-    <div [class.col-md-9]="horizontal">
+    <div class="position-relative" [class.col-md-9]="horizontal">
       <div class="input-group flex-nowrap">
         <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
           [disabled]="disabled"
@@ -42,7 +42,7 @@
         </button>
       </div>
       <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0">
+      <small *ngIf="getSuggestions().length > 0" class="position-absolute top-100">
         <span i18n>Suggestions:</span>&nbsp;
         <ng-container *ngFor="let tag of getSuggestions()">
           <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;

src-ui/src/app/components/common/input/text/text.component.html

@@ -1,4 +1,4 @@
-<div class="mb-3">
+<div class="mb-3" [class.pb-3]="error">
   <div class="row">
     <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
       <label class="form-label mb-md-0" [for]="inputId">{{title}}</label>
@@ -8,10 +8,10 @@
         </svg>&nbsp;<ng-container i18n>Remove</ng-container>
       </button>
     </div>
-    <div [class.col-md-9]="horizontal">
+    <div class="position-relative" [class.col-md-9]="horizontal">
       <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
       <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
-      <div class="invalid-feedback">
+      <div class="invalid-feedback position-absolute top-100">
         {{error}}
       </div>
     </div>

src-ui/src/app/components/common/input/url/url.component.html

@@ -1,4 +1,4 @@
-<div class="mb-3">
+<div class="mb-3" [class.pb-3]="error">
     <div class="row">
       <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
         <label class="form-label mb-md-0" [for]="inputId">{{title}}</label>
@@ -16,7 +16,7 @@
               <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right" />
             </svg>
           </a>
-          <div class="invalid-feedback">
+          <div class="invalid-feedback position-absolute top-100">
             {{error}}
           </div>
         </div>