From 866a3ab528c347ebcea0da14eb7bcb5b117535a1 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 16 Aug 2026 21:14:16 +0200
Subject: [PATCH] fix(ui): improve backup execution table scrolling and borders

---
 resources/css/app.css                              |  8 ++++++++
 .../project/database/backup-executions.blade.php   |  6 +++---
 tests/Feature/EmptyStateComponentTest.php          | 14 +++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 49862f646..95e0207ce 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2707,6 +2707,14 @@ input[type="search"]::-webkit-search-results-decoration {
     min-width: 66rem;
 }
 
+.backup-executions-table-scroll {
+    overflow-x: auto;
+}
+
+.backup-execution-row:last-child > .data-table-row {
+    border-bottom: 0;
+}
+
 .volume-backup-executions-grid {
     grid-template-columns: 7.5rem minmax(0, 1fr) 8.5rem 7rem 9rem minmax(9rem, 0.7fr);
     min-width: 50rem;
diff --git a/resources/views/livewire/project/database/backup-executions.blade.php b/resources/views/livewire/project/database/backup-executions.blade.php
index 42335dca3..6bd2851b7 100644
--- a/resources/views/livewire/project/database/backup-executions.blade.php
+++ b/resources/views/livewire/project/database/backup-executions.blade.php
@@ -32,7 +32,7 @@
                             icon-name="browser-terminal" />
                     </div>
                 @else
-                    <div class="data-table deployment-table-scroll">
+                    <div class="data-table deployment-table-scroll backup-executions-table-scroll">
                         <div
                             class="data-table-header backup-executions-table-grid h-auto rounded-none px-4 py-2.5 text-[11px]">
                             <span>Status</span>
@@ -75,8 +75,8 @@
                                 }
                             @endphp
                             <div wire:key="{{ data_get($execution, 'id') }}"
-                                class="border-b border-neutral-200 last:border-b-0 dark:border-white/[0.06]">
-                                <div class="data-table-row backup-executions-table-grid min-h-14 px-4 py-2.5">
+                                class="backup-execution-row">
+                                <div class="data-table-row backup-executions-table-grid min-h-14 border-b border-neutral-200 px-4 py-2.5 dark:border-white/[0.06]">
                                     <div class="flex items-center gap-2">
                                         <x-status-badge :status="$executionStatusLabel"
                                             :type="$executionStatusType" />
diff --git a/tests/Feature/EmptyStateComponentTest.php b/tests/Feature/EmptyStateComponentTest.php
index f59a9cd25..dc2542dd7 100644
--- a/tests/Feature/EmptyStateComponentTest.php
+++ b/tests/Feature/EmptyStateComponentTest.php
@@ -47,7 +47,7 @@ it('renders the backup executions empty state without a scrollable table', funct
 
     expect($view)
         ->toMatch('/@if \(\$executions_count === 0\)\s*<div class="p-4">\s*<x-empty size="sm" title="No backup executions"/')
-        ->toMatch('/@else\s*<div class="data-table deployment-table-scroll">/')
+        ->toMatch('/@else\s*<div class="data-table deployment-table-scroll backup-executions-table-scroll">/')
         ->not->toContain('@forelse ($executions as $execution)');
 });
 
@@ -58,8 +58,9 @@ it('keeps backup execution actions compact', function () {
     expect($css)
         ->toContain('grid-template-columns: 6.5rem minmax(7rem, 0.8fr) minmax(14rem, 1.5fr) 7rem 5rem 4rem minmax(8rem, 1fr) 5rem;')
         ->and($view)
-        ->toContain('<span class="bg-base sticky right-0 z-10 text-right">Actions</span>')
-        ->toContain('class="bg-base sticky right-0 z-10 flex items-center justify-end gap-1"')
+        ->toContain('<span class="text-right">Actions</span>')
+        ->toContain('class="flex items-center justify-end gap-1"')
+        ->not->toContain('sticky right-0')
         ->toContain('title="Download backup" aria-label="Download backup"')
         ->toContain('<x-reicon name="upload" class="size-3.5 rotate-180" />')
         ->toContain('title="Delete backup" aria-label="Delete backup"')
@@ -71,11 +72,14 @@ it('uses the compact resource table styling for backup executions', function ()
     $css = file_get_contents(resource_path('css/app.css'));
 
     expect($view)
-        ->toContain('class="data-table deployment-table-scroll"')
+        ->toContain('class="data-table deployment-table-scroll backup-executions-table-scroll"')
         ->toContain('data-table-header backup-executions-table-grid h-auto rounded-none px-4 py-2.5 text-[11px]')
-        ->toContain('data-table-row backup-executions-table-grid min-h-14 px-4 py-2.5')
+        ->toContain('data-table-row backup-executions-table-grid min-h-14 border-b border-neutral-200 px-4 py-2.5 dark:border-white/[0.06]')
+        ->toContain('class="backup-execution-row"')
         ->toContain('flex min-h-11 items-center justify-between border-t')
         ->and($css)
+        ->toMatch('/\.backup-executions-table-scroll\s*\{[^}]*overflow-x:\s*auto;/')
+        ->toMatch('/\.backup-execution-row:last-child > \.data-table-row\s*\{[^}]*border-bottom:\s*0;/')
         ->toMatch('/\.backup-executions-table-grid\s*\{[^}]*gap:\s*0\.75rem;[^}]*min-width:\s*66rem;/');
 });