tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-18 14:23:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve backup execution table scrolling and borders

Browse Source
This commit is contained in:
Andras Bacsai
2026-08-16 21:14:16 +02:00
parent bd79f4ec91
commit 866a3ab528
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+8
View File
@@ -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;
resources/views/livewire/project/database/backup-executions.blade.php
+3 -3
View File
@@ -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" />
tests/Feature/EmptyStateComponentTest.php
+9 -5
View File
@@ -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;/');
});