tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-21 00:24:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): scroll backup tables on mobile and use icon actions

Browse Source 
Keep backup schedule grids full-width with horizontal scroll instead of
hiding columns, and replace volume backup execution Download/Delete
buttons with compact icon actions.
This commit is contained in:
Andras Bacsai
2026-08-07 21:48:01 +02:00
parent fb8af10089
commit bbb46eca59
5 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+1 -18
View File
@@ -2234,6 +2234,7 @@ input[type="search"]::-webkit-search-results-decoration {
.backup-table-grid {
grid-template-columns: minmax(10rem, 1.7fr) 6rem minmax(7rem, 0.8fr) 7.5rem 6.5rem minmax(8rem, 1fr) 5rem;
min-width: 50rem;
}
/* Persistent storage volumes: Name | Source | Destination | [PR suffix] | Backup | [Actions] */
@@ -2468,16 +2469,6 @@ input[type="search"]::-webkit-search-results-decoration {
}
@media (max-width: 900px) {
.backup-table-grid {
grid-template-columns: minmax(10rem, 1.5fr) 6rem 7.5rem 6.5rem;
}
.backup-table-grid > :nth-child(3),
.backup-table-grid > :nth-child(6),
.backup-table-grid > :nth-child(7) {
display: none;
}
.team-members-table-grid {
grid-template-columns: minmax(0, 1fr) 7rem 7rem;
}
@@ -2529,14 +2520,6 @@ input[type="search"]::-webkit-search-results-decoration {
width: 100%;
}
.backup-table-grid {
grid-template-columns: minmax(0, 1fr) 7.5rem 6.5rem;
}
.backup-table-grid > :nth-child(2) {
display: none;
}
.team-members-table-grid {
grid-template-columns: minmax(0, 1fr) 6.5rem;
}
resources/views/livewire/project/application/backup/index.blade.php
+1 -1
View File
@@ -172,7 +172,7 @@
</div>
@if ($backups->isNotEmpty())
<div class="data-table flex w-full flex-col" x-show="filteredBackups.length > 0">
<div class="data-table w-full overflow-x-auto" x-show="filteredBackups.length > 0">
<div class="data-table-header backup-table-grid">
<span>Target</span>
<span>Type</span>
resources/views/livewire/project/service/volume-backup/index.blade.php
+1 -1
View File
@@ -173,7 +173,7 @@
</div>
@if ($backups->isNotEmpty())
<div class="data-table flex w-full flex-col" x-show="filteredBackups.length > 0">
<div class="data-table w-full overflow-x-auto" x-show="filteredBackups.length > 0">
<div class="data-table-header backup-table-grid">
<span>Target</span>
<span>Type</span>
resources/views/livewire/project/shared/storages/volume-backups/executions.blade.php
+11 -6
View File
@@ -101,12 +101,13 @@
@endif
</span>
<span class="flex items-center justify-end gap-2">
<span class="flex items-center justify-end gap-1">
@if ($execution->status === 'success' && ! $execution->local_storage_deleted)
<x-forms.button
x-on:click="download_volume_backup_file('{{ $execution->id }}')">
Download
</x-forms.button>
<button type="button" class="icon-button shrink-0"
x-on:click="download_volume_backup_file('{{ $execution->id }}')"
title="Download backup" aria-label="Download backup">
<x-reicon name="upload" class="size-3.5 rotate-180" />
</button>
@endif
@if ($execution->status !== 'running')
<x-modal-confirmation title="Confirm Backup Deletion?" isErrorButton
@@ -116,7 +117,11 @@
confirmationLabel="Please confirm the execution of the actions by entering the Backup Filename below"
shortConfirmationLabel="Backup Filename">
<x-slot:trigger>
<x-forms.button isError>Delete</x-forms.button>
<button type="button"
class="icon-button shrink-0 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300"
title="Delete backup" aria-label="Delete backup">
<x-reicon name="trash" class="size-3.5" />
</button>
</x-slot:trigger>
</x-modal-confirmation>
@endif
tests/Feature/PersistentStorageVolumesLayoutTest.php
+20
View File
@@ -13,6 +13,26 @@ it('keeps the volume backup executions table horizontally scrollable on mobile',
->not->toContain('.data-table-header.volume-backup-executions-grid');
});
it('uses compact icon actions for volume backup executions', function () {
$view = file_get_contents(resource_path('views/livewire/project/shared/storages/volume-backups/executions.blade.php'));
expect($view)
->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"')
->toContain('<x-reicon name="trash" class="size-3.5" />');
});
it('keeps storage backup schedule tables horizontally scrollable on mobile', function () {
$applicationView = file_get_contents(resource_path('views/livewire/project/application/backup/index.blade.php'));
$serviceView = file_get_contents(resource_path('views/livewire/project/service/volume-backup/index.blade.php'));
$css = file_get_contents(resource_path('css/app.css'));
expect($applicationView)->toContain('class="data-table w-full overflow-x-auto"')
->and($serviceView)->toContain('class="data-table w-full overflow-x-auto"')
->and($css)->toMatch('/\.backup-table-grid\s*\{[^}]*min-width:\s*50rem;/');
});
use App\Livewire\Project\Service\VolumeBackup\Create as CreateServiceVolumeBackup;
use App\Livewire\Project\Shared\Storages\All;
use App\Models\Application;