Slightly better embedded doc link element

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -79,8 +79,7 @@
         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
       }
       @case (CustomFieldQueryOperator.Contains) {
-        <!-- TODO: needs visual work -->
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select" placeholder="Search docs" [minimal]="true"></pngx-input-document-link>
-        <pngx-input-document-link [(ngModel)]="atom.value" [horizontal]="true"></pngx-input-document-link>
       }
       @default {
         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss

@@ -15,3 +15,18 @@
   min-width: 35%;
   font-size: 14px;
 }
+
+::ng-deep .doc-link-select {
+  padding-top: 0 !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+
+  .ng-select-container {
+    border: none !important;
+    min-height: auto !important;
+  }
+  .ng-select {
+    max-width: 200px;
+    min-width: 140px;
+  }
+}

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -1,4 +1,7 @@
-<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
+@if (minimal) {
+  <ng-container *ngTemplateOutlet="select"></ng-container>
+} @else {
+  <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
     <div class="row">
       <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
         @if (title) {
@@ -11,7 +14,17 @@
         }
       </div>
       <div [class.col-md-9]="horizontal">
-      <div>
+        <ng-container *ngTemplateOutlet="select"></ng-container>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+      </div>
+    </div>
+  </div>
+}
+
+<ng-template #select>
+  <div class="doc-link-select">
     <ng-select name="inputId" [(ngModel)]="selectedDocuments"
       [disabled]="disabled"
       [items]="foundDocuments$ | async"
@@ -42,9 +55,4 @@
       </ng-template>
     </ng-select>
   </div>
-      @if (hint) {
+</ng-template>
-        <small class="form-text text-muted">{{hint}}</small>
-      }
-    </div>
-  </div>
-</div>

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -46,6 +46,9 @@ export class DocumentLinkComponent
   @Input()
   parentDocumentID: number
 
+  @Input()
+  minimal: boolean = false
+
   constructor(private documentsService: DocumentService) {
     super()
   }