From e67fbc7bc470a5eb960209501fedd5f128b05d1b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 20 Apr 2026 12:35:22 -0700
Subject: [PATCH] Fix borders

---
 .../admin/tasks/tasks.component.html          | 172 +++++++++---------
 .../admin/tasks/tasks.component.scss          |   4 +
 2 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/src-ui/src/app/components/admin/tasks/tasks.component.html b/src-ui/src/app/components/admin/tasks/tasks.component.html
index dc4e0baae..48abf243d 100644
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.html
@@ -94,93 +94,95 @@
     </div>
   </div>
 
-  <table class="table table-striped align-middle border shadow-sm">
-    <thead>
-      <tr>
-        <th scope="col">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" [id]="'all-tasks-' + section" [disabled]="tasks.length === 0" [checked]="areAllSelected(tasks)" (click)="toggleSection(section, $event); $event.stopPropagation();">
-            <label class="form-check-label" [for]="'all-tasks-' + section"></label>
-          </div>
-        </th>
-        <th scope="col" i18n>Name</th>
-        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-        @if (sectionShowsResults(section)) {
-          <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
-        }
-        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
-        <th scope="col" i18n>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (task of tasks; track task.id) {
-        <tr (click)="toggleSelected(task); $event.stopPropagation();">
-          <td>
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task); $event.stopPropagation();">
-              <label class="form-check-label" for="task{{task.id}}"></label>
-            </div>
-          </td>
-          <td class="overflow-auto name-col">
-            <div>{{ taskDisplayName(task) }}</div>
-            <div class="small text-muted">
-              @if (taskShowsSeparateTypeLabel(task)) {
-                <span>{{ task.task_type_display }}</span>
-                <span class="mx-1">&bull;</span>
-              }
-              <span>{{ task.trigger_source_display }}</span>
-            </div>
-          </td>
-          <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-          @if (sectionShowsResults(section)) {
-            <td class="d-none d-lg-table-cell">
-              @if (task.result_message?.length > 50) {
-                <div class="result" (click)="expandTask(task); $event.stopPropagation();"
-                  [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
-                  <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result_message | slice:0:50 }}&hellip;</span>
-                </div>
-              }
-              @if (task.result_message?.length <= 50) {
-                <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result_message }}</span>
-              }
-              <ng-template #resultPopover>
-                <pre class="small mb-0">{{ task.result_message | slice:0:300 }}@if (task.result_message.length > 300) {
-                  &hellip;
-                }</pre>
-                @if (task.result_message?.length > 300) {
-                  <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
-                }
-              </ng-template>
-            </td>
-          }
-          <td class="d-lg-none">
-            <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
-              <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
-            </button>
-          </td>
-          <td scope="row">
-            <div class="btn-group" role="group">
-              <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
-              </button>
-              <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                @if (task.related_document_ids?.[0]) {
-                  <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                    <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
-                  </button>
-                }
-              </ng-container>
-            </div>
-          </td>
-        </tr>
+  <div class="card border table-responsive mb-3">
+    <table class="table table-striped align-middle shadow-sm mb-0">
+      <thead>
         <tr>
-          <td class="p-0" [class.border-0]="expandedTask !== task.id" [attr.colspan]="sectionShowsResults(section) ? 5 : 4">
-            <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result_message }}</div></pre>
-          </td>
+          <th scope="col">
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" [id]="'all-tasks-' + section" [disabled]="tasks.length === 0" [checked]="areAllSelected(tasks)" (click)="toggleSection(section, $event); $event.stopPropagation();">
+              <label class="form-check-label" [for]="'all-tasks-' + section"></label>
+            </div>
+          </th>
+          <th scope="col" i18n>Name</th>
+          <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+          @if (sectionShowsResults(section)) {
+            <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+          }
+          <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+          <th scope="col" i18n>Actions</th>
         </tr>
-      }
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        @for (task of tasks; track task.id) {
+          <tr (click)="toggleSelected(task); $event.stopPropagation();">
+            <td>
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task); $event.stopPropagation();">
+                <label class="form-check-label" for="task{{task.id}}"></label>
+              </div>
+            </td>
+            <td class="overflow-auto name-col">
+              <div>{{ taskDisplayName(task) }}</div>
+              <div class="small text-muted">
+                @if (taskShowsSeparateTypeLabel(task)) {
+                  <span>{{ task.task_type_display }}</span>
+                  <span class="mx-1">&bull;</span>
+                }
+                <span>{{ task.trigger_source_display }}</span>
+              </div>
+            </td>
+            <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
+            @if (sectionShowsResults(section)) {
+              <td class="d-none d-lg-table-cell">
+                @if (task.result_message?.length > 50) {
+                  <div class="result" (click)="expandTask(task); $event.stopPropagation();"
+                    [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+                    <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result_message | slice:0:50 }}&hellip;</span>
+                  </div>
+                }
+                @if (task.result_message?.length <= 50) {
+                  <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result_message }}</span>
+                }
+                <ng-template #resultPopover>
+                  <pre class="small mb-0">{{ task.result_message | slice:0:300 }}@if (task.result_message.length > 300) {
+                    &hellip;
+                  }</pre>
+                  @if (task.result_message?.length > 300) {
+                    <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                  }
+                </ng-template>
+              </td>
+            }
+            <td class="d-lg-none">
+              <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+                <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+              </button>
+            </td>
+            <td scope="row">
+              <div class="btn-group" role="group">
+                <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+                  <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
+                </button>
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                  @if (task.related_document_ids?.[0]) {
+                    <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                      <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
+                    </button>
+                  }
+                </ng-container>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td class="p-0" [class.border-0]="expandedTask !== task.id" [attr.colspan]="sectionShowsResults(section) ? 5 : 4">
+              <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result_message }}</div></pre>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
 </ng-template>
 
 @if (visibleSections.length > 0) {
diff --git a/src-ui/src/app/components/admin/tasks/tasks.component.scss b/src-ui/src/app/components/admin/tasks/tasks.component.scss
index 325fd2c02..d8ebc21f0 100644
--- a/src-ui/src/app/components/admin/tasks/tasks.component.scss
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.scss
@@ -37,3 +37,7 @@ pre {
 .z-10 {
     z-index: 10;
 }
+
+tbody tr:nth-last-child(2) td {
+    border-bottom: none !important;
+}