From 39197d0357710013d917f8b80953f812fd962f95 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 6 Aug 2026 21:52:56 +0200
Subject: [PATCH] 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.
---
 resources/css/app.css                         | 30 ++++++++-----------
 .../application/deployment/index.blade.php    | 22 +++++++-------
 tests/Feature/DeploymentLogsLayoutTest.php    | 13 ++++++++
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 54150d1bb..ae7b31d6d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -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;
diff --git a/resources/views/livewire/project/application/deployment/index.blade.php b/resources/views/livewire/project/application/deployment/index.blade.php
index 450da3894..bc2a8bc70 100644
--- a/resources/views/livewire/project/application/deployment/index.blade.php
+++ b/resources/views/livewire/project/application/deployment/index.blade.php
@@ -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"
diff --git a/tests/Feature/DeploymentLogsLayoutTest.php b/tests/Feature/DeploymentLogsLayoutTest.php
index 7dbfe7681..dae0ee310 100644
--- a/tests/Feature/DeploymentLogsLayoutTest.php
+++ b/tests/Feature/DeploymentLogsLayoutTest.php
@@ -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,