From 1e9add3b42b45a69fe2f6a25b483d4a2278bf857 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 29 Sep 2026 10:54:57 +0200
Subject: [PATCH] fix(ui): show validation checkpoints as a vertical list

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/css/app.css                         | 12 -----------
 .../server/validate-and-install.blade.php     | 21 +++++--------------
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 8fe70dd276..c501404fdd 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -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;
diff --git a/resources/views/livewire/server/validate-and-install.blade.php b/resources/views/livewire/server/validate-and-install.blade.php
index 02aa4d34f3..97c3bbc6cd 100644
--- a/resources/views/livewire/server/validate-and-install.blade.php
+++ b/resources/views/livewire/server/validate-and-install.blade.php
@@ -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>