Use row gap for filter editor

Fixes other indentation in filter-editor

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -1,90 +1,89 @@
-<div class="row flex-wrap" tourAnchor="tour.documents-filter-editor">
+<div class="row flex-wrap row-gap-3" tourAnchor="tour.documents-filter-editor">
-   <div class="col mb-3 mb-xxl-0">
+  <div class="col">
-     <div class="form-inline d-flex align-items-center">
+    <div class="form-inline d-flex align-items-center">
-         <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
+      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
-           <div ngbDropdown>
+        <div ngbDropdown>
-            <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
+          <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
-            <div class="dropdown-menu shadow" ngbDropdownMenu>
+          <div class="dropdown-menu shadow" ngbDropdownMenu>
-              <button *ngFor="let t of textFilterTargets" ngbDropdownItem [class.active]="textFilterTarget === t.id" (click)="changeTextFilterTarget(t.id)">{{t.name}}</button>
+            <button *ngFor="let t of textFilterTargets" ngbDropdownItem [class.active]="textFilterTarget === t.id" (click)="changeTextFilterTarget(t.id)">{{t.name}}</button>
-            </div>
           </div>
-          <select *ngIf="textFilterTarget === 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
+        </div>
-            <option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option>
+        <select *ngIf="textFilterTarget === 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
-          </select>
+          <option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option>
-          <button *ngIf="_textFilter" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
+        </select>
-            <svg fill="currentColor" class="buttonicon-sm me-1">
+        <button *ngIf="_textFilter" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
-              <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          <svg fill="currentColor" class="buttonicon-sm me-1">
-            </svg>
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
-          </button>
+          </svg>
-          <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">
+        </button>
-         </div>
+        <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">
-     </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-auto">
+    <div class="d-flex flex-wrap gap-3">
+      <div class="d-flex flex-wrap gap-2">
+        <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
+          filterPlaceholder="Filter tags" i18n-filterPlaceholder
+          [items]="tags"
+          [manyToOne]="true"
+          [(selectionModel)]="tagSelectionModel"
+          (selectionModelChange)="updateRules()"
+          (opened)="onTagsDropdownOpen()"
+          [documentCounts]="tagDocumentCounts"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
+          filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
+          [items]="correspondents"
+          [(selectionModel)]="correspondentSelectionModel"
+          (selectionModelChange)="updateRules()"
+          (opened)="onCorrespondentDropdownOpen()"
+          [documentCounts]="correspondentDocumentCounts"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
+          filterPlaceholder="Filter document types" i18n-filterPlaceholder
+          [items]="documentTypes"
+          [(selectionModel)]="documentTypeSelectionModel"
+          (selectionModelChange)="updateRules()"
+          (opened)="onDocumentTypeDropdownOpen()"
+          [documentCounts]="documentTypeDocumentCounts"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-filterable-dropdown class="flex-fill" title="Storage path" icon="folder-fill" i18n-title
+          filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
+          [items]="storagePaths"
+          [(selectionModel)]="storagePathSelectionModel"
+          (selectionModelChange)="updateRules()"
+          (opened)="onStoragePathDropdownOpen()"
+          [documentCounts]="storagePathDocumentCounts"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+      </div>
+      <div class="d-flex flex-wrap gap-2">
+        <app-date-dropdown
+          title="Created" i18n-title
+          (datesSet)="updateRules()"
+          [(dateBefore)]="dateCreatedBefore"
+          [(dateAfter)]="dateCreatedAfter"
+          [(relativeDate)]="dateCreatedRelativeDate"></app-date-dropdown>
+        <app-date-dropdown
+          title="Added" i18n-title
+          (datesSet)="updateRules()"
+          [(dateBefore)]="dateAddedBefore"
+          [(dateAfter)]="dateAddedAfter"
+          [(relativeDate)]="dateAddedRelativeDate"></app-date-dropdown>
+      </div>
+      <div class="d-flex flex-wrap">
+        <app-permissions-filter-dropdown
+          title="Permissions" i18n-title
+          (ownerFilterSet)="updateRules()"
+          [(selectionModel)]="permissionsSelectionModel"></app-permissions-filter-dropdown>
+      </div>
+      <div class="d-flex flex-wrap d-none d-sm-inline-block">
+        <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
+          <svg class="toolbaricon ms-n1" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#x"></use>
+          </svg><ng-container i18n>Reset filters</ng-container>
+        </button>
+      </div>
+    </div>
   </div>
-  <div class="w-100 d-xxl-none"></div>
-    <div class="col col-xl-auto">
-      <div class="d-flex flex-wrap gap-3">
-        <div class="d-flex flex-wrap gap-2">
-          <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
-            filterPlaceholder="Filter tags" i18n-filterPlaceholder
-            [items]="tags"
-            [manyToOne]="true"
-            [(selectionModel)]="tagSelectionModel"
-            (selectionModelChange)="updateRules()"
-            (opened)="onTagsDropdownOpen()"
-            [documentCounts]="tagDocumentCounts"
-            [allowSelectNone]="true"></app-filterable-dropdown>
-          <app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
-            filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
-            [items]="correspondents"
-            [(selectionModel)]="correspondentSelectionModel"
-            (selectionModelChange)="updateRules()"
-            (opened)="onCorrespondentDropdownOpen()"
-            [documentCounts]="correspondentDocumentCounts"
-            [allowSelectNone]="true"></app-filterable-dropdown>
-          <app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
-            filterPlaceholder="Filter document types" i18n-filterPlaceholder
-            [items]="documentTypes"
-            [(selectionModel)]="documentTypeSelectionModel"
-            (selectionModelChange)="updateRules()"
-            (opened)="onDocumentTypeDropdownOpen()"
-            [documentCounts]="documentTypeDocumentCounts"
-            [allowSelectNone]="true"></app-filterable-dropdown>
-          <app-filterable-dropdown class="flex-fill" title="Storage path" icon="folder-fill" i18n-title
-            filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
-            [items]="storagePaths"
-            [(selectionModel)]="storagePathSelectionModel"
-            (selectionModelChange)="updateRules()"
-            (opened)="onStoragePathDropdownOpen()"
-            [documentCounts]="storagePathDocumentCounts"
-            [allowSelectNone]="true"></app-filterable-dropdown>
-        </div>
-        <div class="d-flex flex-wrap gap-2">
-          <app-date-dropdown
-            title="Created" i18n-title
-            (datesSet)="updateRules()"
-            [(dateBefore)]="dateCreatedBefore"
-            [(dateAfter)]="dateCreatedAfter"
-            [(relativeDate)]="dateCreatedRelativeDate"></app-date-dropdown>
-          <app-date-dropdown
-            title="Added" i18n-title
-            (datesSet)="updateRules()"
-            [(dateBefore)]="dateAddedBefore"
-            [(dateAfter)]="dateAddedAfter"
-            [(relativeDate)]="dateAddedRelativeDate"></app-date-dropdown>
-        </div>
-        <div class="d-flex flex-wrap">
-          <app-permissions-filter-dropdown
-            title="Permissions" i18n-title
-            (ownerFilterSet)="updateRules()"
-            [(selectionModel)]="permissionsSelectionModel"></app-permissions-filter-dropdown>
-        </div>
-        <div class="d-flex flex-wrap d-none d-sm-inline-block">
-          <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
-            <svg class="toolbaricon ms-n1" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#x"></use>
-            </svg><ng-container i18n>Reset filters</ng-container>
-          </button>
-        </div>
-     </div>
-   </div>
 </div>