rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/css/app.css
View file

@ -2707,6 +2707,14 @@ .backup-executions-table-grid {
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;

6
resources/views/livewire/project/database/backup-executions.blade.php
View file

@ -32,7 +32,7 @@ class="application-settings-section-body p-0!">
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 @@ class="data-table-header backup-executions-table-grid h-auto rounded-none px-4 p
}
@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" />

14
tests/Feature/EmptyStateComponentTest.php
View file

@ -47,7 +47,7 @@
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 @@
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 @@
$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;/');
});