mirror of
https://github.com/coollabsio/coolify.git
synced 2026-08-24 10:05:47 -05:00
fix(ui): keep deployment history columns scrollable on mobile
Replace responsive column-hiding with horizontal scroll and a fixed min-width grid so Status, Source, Commit, Started, Duration, and Server stay available on small screens. Also let logs-viewer actions grow in the primary toolbar so the status badge remains usable.
This commit is contained in:
+12
-18
@@ -2329,7 +2329,14 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
}
|
||||
}
|
||||
|
||||
.deployment-table-scroll {
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.deployment-table-grid {
|
||||
min-width: 59rem;
|
||||
grid-template-columns: 7.5rem minmax(7rem, 0.8fr) minmax(12rem, 1.7fr) minmax(8rem, 0.9fr) 6.5rem minmax(7rem, 0.8fr);
|
||||
}
|
||||
|
||||
@@ -2408,15 +2415,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.deployment-table-grid {
|
||||
grid-template-columns: 7.5rem minmax(7rem, 0.8fr) minmax(10rem, 1.4fr) minmax(8rem, 0.9fr);
|
||||
}
|
||||
|
||||
.deployment-table-grid > :nth-child(5),
|
||||
.deployment-table-grid > :nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.team-members-table-grid {
|
||||
grid-template-columns: minmax(0, 1fr) 7rem 7rem;
|
||||
}
|
||||
@@ -2477,15 +2475,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.deployment-table-grid {
|
||||
grid-template-columns: 7.5rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.deployment-table-grid > :nth-child(2),
|
||||
.deployment-table-grid > :nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.team-members-table-grid {
|
||||
grid-template-columns: minmax(0, 1fr) 6.5rem;
|
||||
}
|
||||
@@ -2671,6 +2660,11 @@ html[data-theme="custom"] .logs-viewer-timestamp {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logs-viewer-primary .logs-viewer-actions {
|
||||
width: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.logs-viewer-search {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
|
||||
@@ -168,16 +168,17 @@
|
||||
<x-table.loading id="deployment-table-filter-loading"
|
||||
target="toggleDeploymentFilter,clearFilter,setPullRequestFilter"
|
||||
text="Filtering deployments..." class="rounded-lg" />
|
||||
<div class="data-table-header deployment-table-grid rounded-none!">
|
||||
<span>Status</span>
|
||||
<span>Source</span>
|
||||
<span>Commit</span>
|
||||
<span>Started</span>
|
||||
<span>Duration</span>
|
||||
<span>Server</span>
|
||||
</div>
|
||||
<div class="deployment-table-scroll">
|
||||
<div class="data-table-header deployment-table-grid rounded-none!">
|
||||
<span>Status</span>
|
||||
<span>Source</span>
|
||||
<span>Commit</span>
|
||||
<span>Started</span>
|
||||
<span>Duration</span>
|
||||
<span>Server</span>
|
||||
</div>
|
||||
|
||||
@foreach ($deployments as $deployment)
|
||||
@foreach ($deployments as $deployment)
|
||||
@php
|
||||
$deploymentStatus = data_get($deployment, 'status');
|
||||
$statusLabel = match ($deploymentStatus) {
|
||||
@@ -245,7 +246,8 @@
|
||||
{{ data_get($deployment, 'server_name') ?: data_get($application, 'destination.server.name', '-') }}
|
||||
</span>
|
||||
</a>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<x-table-pagination :from="$firstVisibleRow" :to="$lastVisibleRow" :total="$deployments_count"
|
||||
:current-page="$currentPage" :last-page="$lastPage"
|
||||
|
||||
@@ -176,6 +176,19 @@ it('uses a mobile-friendly stacked logs toolbar markup', function () {
|
||||
->toContain('relative order-7 shrink-0');
|
||||
});
|
||||
|
||||
it('keeps deployment history fields and the log status badge accessible on mobile', function () {
|
||||
$deploymentIndexView = file_get_contents(resource_path('views/livewire/project/application/deployment/index.blade.php'));
|
||||
$appCss = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($deploymentIndexView)
|
||||
->toContain('deployment-table-scroll')
|
||||
->and($appCss)
|
||||
->toContain(".deployment-table-scroll {\n overflow-x: auto;")
|
||||
->toContain(".deployment-table-grid {\n min-width: 59rem;")
|
||||
->not->toContain('.deployment-table-grid > :nth-child')
|
||||
->toContain(".logs-viewer-primary .logs-viewer-actions {\n width: auto;\n flex: 1 1 auto;");
|
||||
});
|
||||
|
||||
it('places cancel deployment controls inside the deployment logs toolbar', function () {
|
||||
$deployment = ApplicationDeploymentQueue::create([
|
||||
'application_id' => $this->application->id,
|
||||
|
||||
Reference in New Issue
Block a user