From 7ea58eaf46f03fe0c28ee9f3961f586cd6e5eef5 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 31 Oct 2026 13:42:56 -0700
Subject: [PATCH] Fix: move document list preview button to own column (#14610)

---
 .../document-list.component.html              | 19 +++++++++++--------
 .../document-list.component.scss              |  4 ----
 2 files changed, 11 insertions(+), 12 deletions(-)

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 a16b4d819c..8a184ef022 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
@@ -208,7 +208,8 @@
                   i18n>Correspondent</th>
               }
               @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-                <th class="cursor-pointer ps-5"
+                <th style="width: 2rem"><!-- Preview --></th>
+                <th class="cursor-pointer"
                   pngxSortable="title"
                   title="Sort by title" i18n-title
                   [currentSortField]="list.sortField"
@@ -321,15 +322,17 @@
                     }
                   </td>
                 }
+                @if (activeDisplayFields.includes(DisplayField.TITLE)) {
+                  <td class="pe-0 text-end align-baseline" (mouseleave)="popupPreview.close()">
+                    <pngx-preview-popup [document]="d" linkClasses="btn btn-sm btn-link text-secondary px-1" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
+                      <i-bs name="eye"></i-bs>
+                    </pngx-preview-popup>
+                  </td>
+                }
                 @if (activeDisplayFields.includes(DisplayField.TITLE) || activeDisplayFields.includes(DisplayField.TAGS)) {
-                  <td width="30%" class="position-relative" [class.ps-5]="activeDisplayFields.includes(DisplayField.TITLE)">
+                  <td width="30%" class="align-baseline">
                     @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-                      <div class="d-inline-block" (mouseleave)="popupPreview.close()">
-                        <pngx-preview-popup class="position-absolute start-0" [document]="d" linkClasses="btn btn-sm btn-link text-secondary" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
-                          <i-bs name="eye"></i-bs>
-                        </pngx-preview-popup>
-                        <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-                      </div>
+                      <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
                     }
                     @if (activeDisplayFields.includes(DisplayField.TAGS)) {
                       @for (tagID of d.tags; track tagID) {
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index 53d5fa51c3..44545aa800 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -87,10 +87,6 @@ $paperless-card-breakpoints: (
   }
 }
 
-.table .ps-5 {
-  padding-left: 2.2rem !important;
-}
-
 a {
   cursor: pointer;
 }