Make filter editor / bulk editor 'sticky' on scroll

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

@@ -75,7 +75,7 @@
 
 </app-page-header>
 
-<div class="w-100 mb-2 mb-sm-4">
+<div class="w-100 sticky-top py-2 mt-n3 py-sm-4 bg-body">
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>

src-ui/src/app/components/document-list/document-list.component.scss

@@ -34,3 +34,12 @@ $paperless-card-breakpoints: (
   right: 0 !important;
   left: auto !important;
 }
+
+.sticky-top {
+  z-index: 1000; // below main navbar
+  top: calc(7rem - 2px); // height of navbar (mobile)
+
+  @media (min-width: 768px) {
+    top: 3.5rem; // height of navbar
+  }
+}

src-ui/src/theme.scss

@@ -5,3 +5,7 @@ $primaryFaded: #d1ddd2;
 $theme-colors: (
   "primary": $primary
 );
+
+.bg-body {
+  background-color: #fff;
+}

src-ui/src/theme_dark.scss

@@ -37,6 +37,10 @@ $border-color-dark-mode: #47494f;
     }
   }
 
+  .bg-body {
+    background-color: $bg-dark-mode !important;
+  }
+
   .text-light {
     color: $text-color-dark-mode !important;
   }