starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): show validation checkpoints as a vertical list

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-09-29 10:54:57 +02:00
co-authored by Claude Opus 5.5
parent cbee84353e
commit 1e9add3b42
2 changed files with 5 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
-12
View File
@@ -2541,18 +2541,6 @@ input[type="search"]::-webkit-search-results-decoration {
border: 1px solid var(--coollabs-fill);
}
.checkpoint-scroll-fade::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 2rem;
background: linear-gradient(to left, var(--coollabs-base), transparent);
pointer-events: none;
}
@media (max-width: 639px) {
.process-dialog-mobile-fullscreen {
height: 100dvh !important;
resources/views/livewire/server/validate-and-install.blade.php
+5 -16
View File
@@ -88,22 +88,11 @@
<div class="border-b border-neutral-200 px-4 py-2.5 dark:border-white/[0.08]">
<h3 class="text-[13px] font-medium text-neutral-600 dark:text-fg-dim">Validation checkpoints</h3>
</div>
<div class="checkpoint-scroll-fade relative min-w-0" x-data="{
observer: null,
scrollToRunning() {
this.$refs.track.querySelector('[data-checkpoint-status=running]')?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
}
}"
x-init="$nextTick(() => scrollToRunning()); observer = new MutationObserver(() => $nextTick(() => scrollToRunning())); observer.observe($refs.track, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-checkpoint-status'] })"
x-destroy="observer?.disconnect()">
<div class="flex min-w-0 snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth scrollbar divide-x divide-neutral-200 dark:divide-white/[0.07]"
x-ref="track">
@foreach ($checkpoints as $checkpoint)
<x-checkpoint-item :title="$checkpoint['title']" :description="$checkpoint['description']"
:status="$checkpoint['status']" data-checkpoint-status="{{ $checkpoint['status'] }}"
class="basis-[88%] shrink-0 snap-start sm:basis-72 lg:basis-80" />
@endforeach
</div>
<div class="divide-y divide-neutral-200 dark:divide-white/[0.07]">
@foreach ($checkpoints as $checkpoint)
<x-checkpoint-item :title="$checkpoint['title']" :description="$checkpoint['description']"
:status="$checkpoint['status']" />
@endforeach
</div>
</div>