diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index e4f17c4e6..57bef0480 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -1,5 +1,5 @@
-  <div class="btn-group" ngbDropdown role="group">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
+  <div class="btn-group w-100" ngbDropdown role="group">
+  <button class="btn btn-sm flex-fill" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index b09491683..ac8dc1d70 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -1,5 +1,5 @@
-<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
+<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
+  <button class="btn btn-sm flex-fill" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
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 a8c8740ca..82e73dafd 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
@@ -7,8 +7,8 @@
   </div>
   <div class="w-100 d-xl-none"></div>
     <div class="col col-xl-auto mb-2 mb-xl-0">
-      <div class="d-flex  justify-content-between">
-        <app-filterable-dropdown class="mr-md-3" title="Tags" icon="tag-fill" i18n-title
+      <div class="d-flex justify-content-between">
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [(selectionModel)]="tagSelectionModel"
@@ -16,26 +16,26 @@
           [multiple]="true"
           (open)="onTagsDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="mr-md-3" title="Correspondent" icon="person-fill" i18n-title
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
           (selectionModelChange)="updateRules()"
           (open)="onCorrespondentDropdownOpen()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-filterable-dropdown class="mr-md-3" title="Document type" icon="file-earmark-fill" i18n-title
+        <app-filterable-dropdown class="mr-2 flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
           filterPlaceholder="Filter document types" i18n-filterPlaceholder
           [items]="documentTypes"
           [(selectionModel)]="documentTypeSelectionModel"
           (open)="onDocumentTypeDropdownOpen()"
           (selectionModelChange)="updateRules()"
           [allowSelectNone]="true"></app-filterable-dropdown>
-        <app-date-dropdown class="mr-md-3"
+        <app-date-dropdown class="mr-2 flex-fill"
           title="Created" i18n-title
           (datesSet)="updateRules()"
           [(dateBefore)]="dateCreatedBefore"
           [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
-        <app-date-dropdown
+        <app-date-dropdown class="flex-fill"
           [(dateBefore)]="dateAddedBefore"
           [(dateAfter)]="dateAddedAfter"
           title="Added" i18n-title