From ab71f1af6128449487dac8c7192c613191acc411 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 21 Oct 2026 18:45:49 +0200
Subject: [PATCH] fix(ui): align dashboard deployments heading and unify muted
 table headers

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/css/app.css                                 |  9 ++++++---
 .../livewire/dashboard/active-deployments.blade.php   | 11 ++++-------
 tests/Feature/DashboardDeploymentsTest.php            |  6 +++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index c149d4c55d..f6925c890e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -514,7 +514,7 @@ tr {
 }
 
 tr th {
-    @apply px-3 py-3.5 text-left text-black dark:text-white;
+    @apply px-3 py-3.5 text-left text-neutral-500 dark:text-fg-faint;
 }
 
 tr th:first-child {
@@ -1299,8 +1299,10 @@ html:not(.dark) .application-console-shell[data-console-theme="system"] .termina
     /* Tertiary text. Base token (59.31%) only clears 4.5:1 on app/panel; it
        failed on surface/raised/selected (4.46/4.20/3.73). Raised to 64% so the
        313 dark:text-fg-faint usages clear AA across the whole surface ladder,
-       while staying clearly dimmer than fg-dim (76.99%). */
-    --color-fg-faint: oklch(65% 0 0);
+       while staying clearly dimmer than fg-dim (76.99%). A faint purple tint
+       (hue 300, like the surfaces) so muted text sits in the surface instead
+       of reading as a cold neutral gray. */
+    --color-fg-faint: oklch(65% 0.02 300);
     /* Error text. The base error red (57.71%) failed on every dark surface
        (4.10/3.75/3.53). Brightened for dark mode so text-error clears AA on the
        card ladder while staying unmistakably red. */
@@ -2845,6 +2847,7 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .data-table-row:hover {
     background: rgba(0, 0, 0, 0.02);
+    color: var(--color-fg-faint);
 }
 
 .dark .data-table-row:hover {
diff --git a/resources/views/livewire/dashboard/active-deployments.blade.php b/resources/views/livewire/dashboard/active-deployments.blade.php
index 7d2e88b2ff..ff7897b42a 100644
--- a/resources/views/livewire/dashboard/active-deployments.blade.php
+++ b/resources/views/livewire/dashboard/active-deployments.blade.php
@@ -28,14 +28,14 @@
     @if ($hasAnyDeployments)
         {{-- Container breakpoints: the table needs room, which the dashboard column may not have. --}}
         <section class="@container mb-0! min-w-0">
-            <x-section-heading title="Deployments" />
+            <x-section-heading title="Deployments" class="py-1.5" />
 
             <div class="flex min-w-0 flex-col gap-4">
                 @if ($hasActiveDeployments)
                     <div
                         class="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-white/[0.08] dark:bg-white/[0.05]">
                         <div class="border-b border-neutral-200 px-4 py-2.5 dark:border-white/[0.08]">
-                            <h3 class="text-[12px]! leading-4! font-semibold! text-black dark:text-fg">
+                            <h3 class="text-[11px]! leading-4! font-medium! text-neutral-500! dark:text-fg-faint!">
                                 Active
                             </h3>
                             <p class="mt-0.5 text-[11px] text-neutral-500 dark:text-fg-faint">
@@ -104,12 +104,9 @@
                     <div
                         class="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-white/[0.08] dark:bg-white/[0.05]">
                         <div class="border-b border-neutral-200 px-4 py-2.5 dark:border-white/[0.08]">
-                            <h3 class="text-[12px]! leading-4! font-semibold! text-black dark:text-fg">
-                                Recent
+                            <h3 class="text-[11px]! leading-4! font-medium! text-neutral-500! dark:text-fg-faint!">
+                                Recent deployments
                             </h3>
-                            <p class="mt-0.5 text-[11px] text-neutral-500 dark:text-fg-faint">
-                                Latest completed deployments
-                            </p>
                         </div>
 
                         <div
diff --git a/tests/Feature/DashboardDeploymentsTest.php b/tests/Feature/DashboardDeploymentsTest.php
index 22b5699843..d949a62e7e 100644
--- a/tests/Feature/DashboardDeploymentsTest.php
+++ b/tests/Feature/DashboardDeploymentsTest.php
@@ -56,7 +56,7 @@ function createDashboardDeployment(array $overrides = []): ApplicationDeployment
 it('hides the deployments section when there is nothing to show', function () {
     Livewire::test(ActiveDeployments::class)
         ->assertDontSee('Running or queued right now')
-        ->assertDontSee('Latest completed deployments')
+        ->assertDontSee('Recent deployments')
         ->assertDontSee('No active deployments')
         ->assertDontSee('No recent deployments');
 });
@@ -71,7 +71,7 @@ it('shows only the active section when there are active deployments', function (
         ->assertSee('Deployments')
         ->assertSee('Running or queued right now')
         ->assertSee('Running Now')
-        ->assertDontSee('Latest completed deployments')
+        ->assertDontSee('Recent deployments')
         ->assertDontSee('No active deployments')
         ->assertDontSee('No recent deployments');
 });
@@ -84,7 +84,7 @@ it('shows only the recent section when there are recent deployments', function (
 
     Livewire::test(ActiveDeployments::class)
         ->assertSee('Deployments')
-        ->assertSee('Latest completed deployments')
+        ->assertSee('Recent deployments')
         ->assertSee('Finished Earlier')
         ->assertDontSee('Running or queued right now')
         ->assertDontSee('No active deployments')