From 6ceb0cada84cb174fbc36ed46c83627e38fb0da6 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 5 Mar 2025 09:08:14 -0800
Subject: [PATCH] Styling, placement at end

---
 src-ui/messages.xlf                           |  40 +--
 .../dates-dropdown.component.html             | 302 +++++++++---------
 .../dates-dropdown.component.scss             |  15 +-
 .../dates-dropdown.component.ts               |   3 +
 .../filter-editor.component.html              |   1 +
 5 files changed, 173 insertions(+), 188 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 1c9cb7f59..50dbf8e52 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -1198,7 +1198,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
-          <context context-type="linenumber">105</context>
+          <context context-type="linenumber">106</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/manage/mail/mail.component.html</context>
@@ -1732,7 +1732,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">10</context>
+          <context context-type="linenumber">8</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
@@ -3344,19 +3344,19 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">52</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">76</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">137</context>
+          <context context-type="linenumber">128</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">163</context>
+          <context context-type="linenumber">152</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
@@ -3375,19 +3375,19 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">57</context>
+          <context context-type="linenumber">53</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">83</context>
+          <context context-type="linenumber">77</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">138</context>
+          <context context-type="linenumber">129</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">164</context>
+          <context context-type="linenumber">153</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/date/date.component.html</context>
@@ -3510,51 +3510,51 @@
         <source>Relative dates</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">27</context>
+          <context context-type="linenumber">25</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">101</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6052766076365105714" datatype="html">
         <source>now</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">29</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">114</context>
+          <context context-type="linenumber">105</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5203279511751768967" datatype="html">
         <source>From</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">48</context>
+          <context context-type="linenumber">44</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">129</context>
+          <context context-type="linenumber">120</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1640609344969975994" datatype="html">
         <source>To</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">74</context>
+          <context context-type="linenumber">68</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">155</context>
+          <context context-type="linenumber">144</context>
         </context-group>
       </trans-unit>
       <trans-unit id="231679111972850796" datatype="html">
         <source>Added</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">92</context>
+          <context context-type="linenumber">84</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
@@ -7753,7 +7753,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
-          <context context-type="linenumber">111</context>
+          <context context-type="linenumber">112</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1559883523769732271" datatype="html">
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
index 2e113bd2a..86b43f731 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
@@ -1,172 +1,158 @@
-<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions">
+<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
   <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
-    <div class="row d-flex">
-      <div class="col border-end">
-        <h6 class="dropdown-header border-bottom" i18n>Created</h6>
-        <div class="list-group list-group-flush">
-
-          <div class="list-group-item d-flex p-2" role="menuitem">
-            <div class="selected-icon">
-              @if (createdRelativeDate) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
-            </div>
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <ng-select class="w-100" name="createdRelativeDate"
-              [items]="relativeDates" [(ngModel)]="createdRelativeDate"
-              bindValue="id"
-              bindLabel="name"
-              placeholder="Relative dates"
-              i18n-placeholder
-              (change)="onSetCreatedRelativeDate($event)">
-              <ng-template ng-option-tmp let-item="item">
-                {{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span>
-              </ng-template>
-              </ng-select>
-            </div>
-          </div>
-
-          <div class="list-group-item d-flex p-2" role="menuitem">
-
-            <div class="selected-icon">
-              @if (createdDateFrom) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
-            </div>
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <span class="input-group-text w-25 small text-muted" i18n>From</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #createdFromFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="createdDateFrom = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="createdDateFromPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
-            </div>
-
-          </div>
-          <div class="list-group-item d-flex p-2" role="menuitem">
-
-            <div class="selected-icon">
-              @if (createdDateTo) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
-            </div>
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <span class="input-group-text w-25 small text-muted" i18n>To</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #createdToFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="createdDateTo = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="createdDateToPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
-            </div>
-
-          </div>
+    <h6 class="dropdown-header border-bottom" i18n>Created</h6>
+    <div class="list-group list-group-flush">
+      <div class="list-group-item d-flex p-2 select-item" role="menuitem">
+        <div class="selected-icon">
+          @if (createdRelativeDate) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <ng-select class="w-100" name="createdRelativeDate"
+          [items]="relativeDates" [(ngModel)]="createdRelativeDate"
+          bindValue="id"
+          bindLabel="name"
+          clearable="false"
+          placeholder="Relative dates"
+          i18n-placeholder
+          (change)="onSetCreatedRelativeDate($event)">
+          <ng-template ng-option-tmp let-item="item">
+            <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+          </ng-template>
+          </ng-select>
         </div>
       </div>
-      <div class="col">
-        <h6 class="dropdown-header border-bottom" i18n>Added</h6>
-        <div class="list-group list-group-flush">
-          <div class="list-group-item d-flex p-2" role="menuitem">
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (createdDateFrom) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>From</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #createdFromFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="createdDateFrom = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="createdDateFromPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (createdDateTo) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>To</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #createdToFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="createdDateTo = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="createdDateToPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
 
-            <div class="selected-icon">
-              @if (addedRelativeDate) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
+      </div>
+    </div>
+    <h6 class="dropdown-header border-bottom" i18n>Added</h6>
+    <div class="list-group list-group-flush">
+      <div class="list-group-item d-flex p-2 select-item" role="menuitem">
+        <div class="selected-icon">
+          @if (addedRelativeDate) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <ng-select class="w-100" name="addedRelativeDate"
+            [items]="relativeDates" [(ngModel)]="addedRelativeDate"
+            bindValue="id"
+            bindLabel="name"
+            clearable="false"
+            placeholder="Relative dates"
+            i18n-placeholder
+            (change)="onSetAddedRelativeDate($event)">
+            <ng-template ng-option-tmp let-item="item">
+              <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+            </ng-template>
+          </ng-select>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (addedDateFrom) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>From</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #addedFromFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="addedDateFrom = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="addedDateFromPicker.close()" i18n>Close</button>
             </div>
-
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <ng-select class="w-100" name="addedRelativeDate"
-                [items]="relativeDates" [(ngModel)]="addedRelativeDate"
-                bindValue="id"
-                bindLabel="name"
-                placeholder="Relative dates"
-                i18n-placeholder
-                (change)="onSetAddedRelativeDate($event)">
-                <ng-template ng-option-tmp let-item="item">
-                  {{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span>
-                </ng-template>
-              </ng-select>
+          </ng-template>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (addedDateTo) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>To</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #addedToFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="addedDateTo = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="addedDateToPicker.close()" i18n>Close</button>
             </div>
-          </div>
-          <div class="list-group-item d-flex p-2" role="menuitem">
-            <div class="selected-icon">
-              @if (addedDateFrom) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
-            </div>
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <span class="input-group-text w-25 small text-muted" i18n>From</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #addedFromFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="addedDateFrom = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="addedDateFromPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
-            </div>
-
-          </div>
-          <div class="list-group-item d-flex p-2" role="menuitem">
-
-            <div class="selected-icon">
-              @if (addedDateTo) {
-                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()">
-                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-                </a>
-              }
-            </div>
-            <div class="input-group input-group-sm small ps-1 pe-2">
-              <span class="input-group-text w-25 small text-muted" i18n>To</span>
-              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
-              <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button">
-                <i-bs width="1em" height="1em" name="calendar"></i-bs>
-              </button>
-              <ng-template #addedToFooterTemplate>
-                <div class="btn-group-xs border-top p-2 d-flex">
-                  <button class="btn btn-primary" (click)="addedDateTo = today; onChangeDebounce()" i18n>Today</button>
-                  <button class="btn btn-secondary ms-auto" (click)="addedDateToPicker.close()" i18n>Close</button>
-                </div>
-              </ng-template>
-            </div>
-
-          </div>
+          </ng-template>
         </div>
       </div>
     </div>
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
index ebd34b29a..616835b3a 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
@@ -1,16 +1,7 @@
 .date-dropdown {
+  --bs-dropdown-min-width: 22rem;
   white-space: nowrap;
 
-  @media(min-width: 768px) {
-    --bs-dropdown-min-width: 40rem;
-  }
-
-  @media screen and (max-width: 767px) {
-    .border-end {
-      border: none !important;
-    }
-  }
-
   .btn-link {
     line-height: 1;
   }
@@ -21,6 +12,10 @@
   min-height: 1em;
 }
 
+.select-item .selected-icon {
+  line-height: 2em;
+}
+
 .input-group-sm {
   .form-control {
     font-size: 0.875rem;
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
index 3645f7ddc..799335eef 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
@@ -159,6 +159,9 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
   @Input()
   disabled: boolean = false
 
+  @Input()
+  placement: string = 'bottom-start'
+
   public readonly today: string = new Date().toISOString().split('T')[0]
 
   get isActive(): boolean {
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index fcb7bed8f..f8d346cba 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -93,6 +93,7 @@
         }
         <pngx-dates-dropdown class="flex-fill fade" [class.show]="show"
           title="Dates" i18n-title
+          placement="bottom-end"
           (datesSet)="updateRules()"
           [(createdDateTo)]="dateCreatedTo"
           [(createdDateFrom)]="dateCreatedFrom"