From 6a78dde3e3b2302cb8e9cac26996561dc07476d4 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 4 Nov 2023 23:11:15 -0700
Subject: [PATCH] Fix horizontal labels should stay centered to field on error

---
 .../app/components/common/input/date/date.component.html    | 6 +++---
 .../components/common/input/number/number.component.html    | 6 +++---
 .../app/components/common/input/tags/tags.component.html    | 6 +++---
 .../app/components/common/input/text/text.component.html    | 6 +++---
 .../src/app/components/common/input/url/url.component.html  | 4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 53f195651..9becf6cb2 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/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;
diff --git a/src-ui/src/app/components/common/input/number/number.component.html b/src-ui/src/app/components/common/input/number/number.component.html
index 39aa6d4f5..d934993c0 100644
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 46fed9d0b..975119f69 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/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;
diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html
index 83b2b7b9e..431a17080 100644
--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/common/input/url/url.component.html b/src-ui/src/app/components/common/input/url/url.component.html
index 8b8452ca1..451bb8a7d 100644
--- a/src-ui/src/app/components/common/input/url/url.component.html
+++ b/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>