Add more card columns on very large screens

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

@@ -116,6 +116,6 @@
 </table>
 
 
-<div class="m-n2 row row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5" *ngIf="displayMode == 'smallCards'">
+<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
   <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -0,0 +1,21 @@
+$paperless-card-breakpoints: (
+  0: 2, // xs
+  768px: 3, //md
+  992px: 4, //lg
+  1200px: 5, //xl
+  1400px: 6, // xxl
+  1600px: 7,
+  1800px: 8,
+  2000px: 9
+);
+
+.row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: 100% / $n_cols;
+      }
+    }
+  }
+}