From 0c3dac45b532609860f08c5043393ce08b329305 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:57:18 -0700
Subject: [PATCH] Fix: use responsive table for compatibility with custom
 columns (#7255)

---
 src-ui/messages.xlf                           |  54 +--
 .../document-list.component.html              | 369 +++++++++---------
 2 files changed, 213 insertions(+), 210 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 2061c9c12..4a62abebb 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -1042,7 +1042,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">209</context>
+          <context context-type="linenumber">211</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -1926,7 +1926,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">236</context>
+          <context context-type="linenumber">238</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -2716,7 +2716,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">191</context>
+          <context context-type="linenumber">193</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -3321,7 +3321,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">245</context>
+          <context context-type="linenumber">247</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -5429,7 +5429,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">275</context>
+          <context context-type="linenumber">277</context>
         </context-group>
       </trans-unit>
       <trans-unit id="78870852467682010" datatype="html">
@@ -5444,7 +5444,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">310</context>
+          <context context-type="linenumber">312</context>
         </context-group>
       </trans-unit>
       <trans-unit id="157572966557284263" datatype="html">
@@ -5459,7 +5459,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">317</context>
+          <context context-type="linenumber">319</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8911158217491828773" datatype="html">
@@ -5749,7 +5749,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">188</context>
+          <context context-type="linenumber">190</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
@@ -5790,7 +5790,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">179</context>
+          <context context-type="linenumber">180</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -5817,7 +5817,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">218</context>
+          <context context-type="linenumber">220</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -5844,7 +5844,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">227</context>
+          <context context-type="linenumber">229</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -6645,7 +6645,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">286</context>
+          <context context-type="linenumber">288</context>
         </context-group>
       </trans-unit>
       <trans-unit id="106713086593101376" datatype="html">
@@ -6847,14 +6847,14 @@
         <source>Sort by ASN</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">166</context>
+          <context context-type="linenumber">167</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7517688192215738656" datatype="html">
         <source>ASN</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">170</context>
+          <context context-type="linenumber">171</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
@@ -6873,28 +6873,28 @@
         <source>Sort by correspondent</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">175</context>
+          <context context-type="linenumber">176</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2066713941761361709" datatype="html">
         <source>Sort by title</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">184</context>
+          <context context-type="linenumber">185</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6232673011753681091" datatype="html">
         <source>Sort by owner</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">196</context>
+          <context context-type="linenumber">198</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3715596725146409911" datatype="html">
         <source>Owner</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">200</context>
+          <context context-type="linenumber">202</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -6909,56 +6909,56 @@
         <source>Sort by notes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">205</context>
+          <context context-type="linenumber">207</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5499001829734502606" datatype="html">
         <source>Sort by document type</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">214</context>
+          <context context-type="linenumber">216</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6213829731736042759" datatype="html">
         <source>Sort by storage path</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">223</context>
+          <context context-type="linenumber">225</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3406167410329973166" datatype="html">
         <source>Sort by created date</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">232</context>
+          <context context-type="linenumber">234</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3769035778779263084" datatype="html">
         <source>Sort by added date</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">241</context>
+          <context context-type="linenumber">243</context>
         </context-group>
       </trans-unit>
       <trans-unit id="329406837759048287" datatype="html">
         <source> Shared </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">248,250</context>
+          <context context-type="linenumber">250,252</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2179847500064178686" datatype="html">
         <source>Edit document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">282</context>
+          <context context-type="linenumber">284</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2807800733729323332" datatype="html">
         <source>Yes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">333</context>
+          <context context-type="linenumber">335</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/pipes/yes-no.pipe.ts</context>
@@ -6969,7 +6969,7 @@
         <source>No</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">333</context>
+          <context context-type="linenumber">335</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/pipes/yes-no.pipe.ts</context>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index b0a5b92e6..d44880d0f 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -157,191 +157,194 @@
       </div>
     }
     @if (list.displayMode === DisplayMode.TABLE) {
-      <table class="table table-sm align-middle border shadow-sm">
-        <thead>
-          <th></th>
-          @if (activeDisplayFields.includes(DisplayField.ASN)) {
-            <th class="d-none d-lg-table-cell cursor-pointer"
-              pngxSortable="archive_serial_number"
-              title="Sort by ASN" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>ASN</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-            <th class="d-none d-md-table-cell cursor-pointer"
-              pngxSortable="correspondent__name"
-              title="Sort by correspondent" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Correspondent</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-            <th class="cursor-pointer"
-              pngxSortable="title"
-              title="Sort by title" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Title</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
-            <th i18n>Tags</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
-            <th class="d-none d-xl-table-cell cursor-pointer"
-              pngxSortable="owner"
-              title="Sort by owner" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Owner</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
-            <th class="d-none d-xl-table-cell cursor-pointer"
-              pngxSortable="num_notes"
-              title="Sort by notes" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Notes</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
-            <th class="d-none d-xl-table-cell cursor-pointer"
-              pngxSortable="document_type__name"
-              title="Sort by document type" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Document type</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
-            <th class="d-none d-xl-table-cell cursor-pointer"
-              pngxSortable="storage_path__name"
-              title="Sort by storage path" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Storage path</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.CREATED)) {
-            <th class="cursor-pointer"
-              pngxSortable="created"
-              title="Sort by created date" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Created</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.ADDED)) {
-            <th class="cursor-pointer"
-              pngxSortable="added"
-              title="Sort by added date" i18n-title
-              [currentSortField]="list.sortField"
-              [currentSortReverse]="list.sortReverse"
-              (sort)="onSort($event)"
-            i18n>Added</th>
-          }
-          @if (activeDisplayFields.includes(DisplayField.SHARED)) {
-            <th i18n>
-              Shared
-            </th>
-          }
-          @for (field of activeDisplayCustomFields; track field) {
-            <th>
-              {{getDisplayCustomFieldTitle(field)}}
-            </th>
-          }
-        </thead>
-        <tbody>
-          @for (d of list.documents; track trackByDocumentId($index, d)) {
-            <tr (click)="toggleSelected(d, $event); $event.stopPropagation();" (dblclick)="openDocumentDetail(d)" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
-              <td>
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();">
-                  <label class="form-check-label" for="docCheck{{d.id}}"></label>
-                </div>
-              </td>
-              @if (activeDisplayFields.includes(DisplayField.ASN)) {
-                <td class="d-none d-xl-table-cell">
-                  {{d.archive_serial_number}}
+      <div class="table-responsive">
+        <table class="table table-sm align-middle border shadow-sm">
+          <thead>
+            <th></th>
+            @if (activeDisplayFields.includes(DisplayField.ASN)) {
+              <th class="cursor-pointer"
+                pngxSortable="archive_serial_number"
+                title="Sort by ASN" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>ASN</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
+              <th class="cursor-pointer"
+                pngxSortable="correspondent__name"
+                title="Sort by correspondent" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Correspondent</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.TITLE)) {
+              <th class="cursor-pointer"
+                pngxSortable="title"
+                title="Sort by title" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+                style="min-width: 150px;"
+              i18n>Title</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
+              <th i18n>Tags</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
+              <th class="cursor-pointer"
+                pngxSortable="owner"
+                title="Sort by owner" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Owner</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
+              <th class="cursor-pointer"
+                pngxSortable="num_notes"
+                title="Sort by notes" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Notes</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
+              <th class="cursor-pointer"
+                pngxSortable="document_type__name"
+                title="Sort by document type" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Document type</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
+              <th class="cursor-pointer"
+                pngxSortable="storage_path__name"
+                title="Sort by storage path" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Storage path</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.CREATED)) {
+              <th class="cursor-pointer"
+                pngxSortable="created"
+                title="Sort by created date" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Created</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.ADDED)) {
+              <th class="cursor-pointer"
+                pngxSortable="added"
+                title="Sort by added date" i18n-title
+                [currentSortField]="list.sortField"
+                [currentSortReverse]="list.sortReverse"
+                (sort)="onSort($event)"
+              i18n>Added</th>
+            }
+            @if (activeDisplayFields.includes(DisplayField.SHARED)) {
+              <th i18n>
+                Shared
+              </th>
+            }
+            @for (field of activeDisplayCustomFields; track field) {
+              <th>
+                {{getDisplayCustomFieldTitle(field)}}
+              </th>
+            }
+          </thead>
+          <tbody>
+            @for (d of list.documents; track trackByDocumentId($index, d)) {
+              <tr (click)="toggleSelected(d, $event); $event.stopPropagation();" (dblclick)="openDocumentDetail(d)" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
+                <td>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();">
+                    <label class="form-check-label" for="docCheck{{d.id}}"></label>
+                  </div>
                 </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-                <td class="d-none d-xl-table-cell">
-                  @if (d.correspondent) {
-                    <a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent" i18n-title>{{(d.correspondent$ | async)?.name}}</a>
-                  }
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.TITLE) || activeDisplayFields.includes(DisplayField.TAGS)) {
-                <td width="30%">
-                  @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-                    <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-                  }
-                  @if (activeDisplayFields.includes(DisplayField.TAGS)) {
-                    @for (t of d.tags$ | async; track t) {
-                      <pngx-tag [tag]="t" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></pngx-tag>
+                @if (activeDisplayFields.includes(DisplayField.ASN)) {
+                  <td class="">
+                    {{d.archive_serial_number}}
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
+                  <td class="">
+                    @if (d.correspondent) {
+                      <a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent" i18n-title>{{(d.correspondent$ | async)?.name}}</a>
                     }
-                  }
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
-                <td>
-                  {{d.owner | username}}
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
-                <td class="d-none d-xl-table-cell">
-                  @if (d.notes.length) {
-                    <a routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
-                      <span class="badge rounded-pill bg-light border text-primary">
-                        <i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
-                      {{d.notes.length}}</span>
-                    </a>
-                  }
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
-                <td class="d-none d-xl-table-cell">
-                  @if (d.document_type) {
-                    <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type" i18n-title>{{(d.document_type$ | async)?.name}}</a>
-                  }
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
-                <td class="d-none d-xl-table-cell">
-                  @if (d.storage_path) {
-                    <a (click)="clickStoragePath(d.storage_path);$event.stopPropagation()" title="Filter by storage path" i18n-title>{{(d.storage_path$ | async)?.name}}</a>
-                  }
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.CREATED)) {
-                <td>
-                  {{d.created_date | customDate}}
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.ADDED)) {
-                <td>
-                  {{d.added | customDate}}
-                </td>
-              }
-              @if (activeDisplayFields.includes(DisplayField.SHARED)) {
-                <td>
-                  @if (d.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }
-                </td>
-              }
-              @for (field of activeDisplayCustomFields; track field) {
-                <td class="d-none d-xl-table-cell">
-                  <pngx-custom-field-display [document]="d" [fieldDisplayKey]="field"></pngx-custom-field-display>
-                </td>
-              }
-            </tr>
-          }
-        </tbody>
-      </table>
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.TITLE) || activeDisplayFields.includes(DisplayField.TAGS)) {
+                  <td width="30%">
+                    @if (activeDisplayFields.includes(DisplayField.TITLE)) {
+                      <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+                    }
+                    @if (activeDisplayFields.includes(DisplayField.TAGS)) {
+                      @for (t of d.tags$ | async; track t) {
+                        <pngx-tag [tag]="t" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></pngx-tag>
+                      }
+                    }
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
+                  <td>
+                    {{d.owner | username}}
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
+                  <td class="">
+                    @if (d.notes.length) {
+                      <a routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
+                        <span class="badge rounded-pill bg-light border text-primary">
+                          <i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
+                        {{d.notes.length}}</span>
+                      </a>
+                    }
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
+                  <td class="">
+                    @if (d.document_type) {
+                      <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type" i18n-title>{{(d.document_type$ | async)?.name}}</a>
+                    }
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
+                  <td class="">
+                    @if (d.storage_path) {
+                      <a (click)="clickStoragePath(d.storage_path);$event.stopPropagation()" title="Filter by storage path" i18n-title>{{(d.storage_path$ | async)?.name}}</a>
+                    }
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.CREATED)) {
+                  <td>
+                    {{d.created_date | customDate}}
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.ADDED)) {
+                  <td>
+                    {{d.added | customDate}}
+                  </td>
+                }
+                @if (activeDisplayFields.includes(DisplayField.SHARED)) {
+                  <td>
+                    @if (d.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }
+                  </td>
+                }
+                @for (field of activeDisplayCustomFields; track field) {
+                  <td class="">
+                    <pngx-custom-field-display [document]="d" [fieldDisplayKey]="field"></pngx-custom-field-display>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
     }
     @if (list.displayMode === DisplayMode.SMALL_CARDS) {
       <div class="row row-cols-paperless-cards">