From d932ac5d5935999863e5e9ff4566a15064323643 Mon Sep 17 00:00:00 2001
From: rosslh <ross@rosshill.ca>
Date: Thu, 8 Oct 2026 12:18:10 +0200
Subject: [PATCH] fix(ui): center card titles when the description is empty

Only render the card description when it has text, and center the title
against the icon. Removing the description placeholders left an empty
description element in items-start rows, so titles without a description
were pinned to the top of the icon.

Closes #12102
---
 resources/views/livewire/dashboard.blade.php  | 20 +++++++++++--------
 .../views/livewire/project/index.blade.php    |  5 +++--
 .../views/livewire/server/index.blade.php     | 10 ++++++----
 .../server/private-key/show.blade.php         | 10 ++++++----
 .../environment/index.blade.php               |  2 +-
 .../shared-variables/project/index.blade.php  |  6 ++++--
 6 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 472b3e9961..5de545df33 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -83,14 +83,16 @@
                                         <x-reicon name="projects" class="size-4" />
                                     @endif
                                 </div>
-                                <div class="min-w-0 flex-1">
+                                <div class="min-w-0 flex-1 self-center">
                                     <h3
                                         class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">
                                         {{ $project->name }}
                                     </h3>
-                                    <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
-                                        {{ $project->description }}
-                                    </p>
+                                    @if (filled($project->description))
+                                        <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
+                                            {{ $project->description }}
+                                        </p>
+                                    @endif
                                 </div>
                             </div>
 
@@ -204,14 +206,16 @@
                                     class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
                                     <x-reicon name="servers" class="size-4" />
                                 </div>
-                                <div class="min-w-0 flex-1">
+                                <div class="min-w-0 flex-1 self-center">
                                     <h3
                                         class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">
                                         {{ $server->name }}
                                     </h3>
-                                    <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
-                                        {{ $server->description }}
-                                    </p>
+                                    @if (filled($server->description))
+                                        <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
+                                            {{ $server->description }}
+                                        </p>
+                                    @endif
                                 </div>
                                 @if ($serverStatusType !== 'success')
                                     <span data-tooltip="{{ $serverStatus }}"
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index a55f565ed8..1351424f70 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -116,12 +116,13 @@
                                         <x-reicon name="projects" class="size-4" />
                                     </template>
                                 </div>
-                                <div class="min-w-0 flex-1">
+                                <div class="min-w-0 flex-1 self-center">
                                     <h2
                                         class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg"
                                         x-text="project.name"></h2>
                                     <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint"
-                                        x-text="project.description || ''"></p>
+                                        x-show="project.description?.trim()"
+                                        x-text="project.description"></p>
                                 </div>
                             </div>
 
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 5258673700..30eca6ac13 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -147,13 +147,15 @@
                                 class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
                                 <x-reicon name="servers" class="size-4" />
                             </div>
-                            <div class="min-w-0 flex-1">
+                            <div class="min-w-0 flex-1 self-center">
                                 <h2 class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">
                                     {{ $serverRow['name'] }}
                                 </h2>
-                                <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
-                                    {{ $serverRow['description'] }}
-                                </p>
+                                @if (filled($serverRow['description']))
+                                    <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
+                                        {{ $serverRow['description'] }}
+                                    </p>
+                                @endif
                             </div>
                             @if ($serverRow['statusType'] !== 'success')
                                 <span data-tooltip="{{ $serverRow['status'] }}"
diff --git a/resources/views/livewire/server/private-key/show.blade.php b/resources/views/livewire/server/private-key/show.blade.php
index 0663dd1168..72e98917e9 100644
--- a/resources/views/livewire/server/private-key/show.blade.php
+++ b/resources/views/livewire/server/private-key/show.blade.php
@@ -68,7 +68,7 @@
                                 class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-500 dark:bg-white/[0.06] dark:text-fg-dim">
                                 <x-reicon name="keys" class="size-4" />
                             </div>
-                            <div class="min-w-0">
+                            <div class="min-w-0 self-center">
                                 <div class="flex flex-wrap items-center gap-2">
                                     <p class="truncate text-sm font-medium text-neutral-950 dark:text-fg">
                                         {{ $privateKey->name }}
@@ -77,9 +77,11 @@
                                         <x-status-badge status="Active" type="success" />
                                     @endif
                                 </div>
-                                <p class="mt-1 text-xs text-neutral-500 dark:text-fg-dim">
-                                    {{ $privateKey->description }}
-                                </p>
+                                @if (filled($privateKey->description))
+                                    <p class="mt-1 text-xs text-neutral-500 dark:text-fg-dim">
+                                        {{ $privateKey->description }}
+                                    </p>
+                                @endif
                             </div>
                         </div>
                         <div class="flex shrink-0 items-center gap-2">
diff --git a/resources/views/livewire/shared-variables/environment/index.blade.php b/resources/views/livewire/shared-variables/environment/index.blade.php
index 645f2e61be..ed8e38407a 100644
--- a/resources/views/livewire/shared-variables/environment/index.blade.php
+++ b/resources/views/livewire/shared-variables/environment/index.blade.php
@@ -33,7 +33,7 @@
                                             href="{{ route('shared-variables.environment.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}" {{ wireNavigate() }}>
                                             <div class="flex items-start gap-3">
                                                 <div class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim"><x-reicon name="layers" class="size-4" /></div>
-                                                <div class="min-w-0 flex-1"><h3 class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">{{ $environment->name }}</h3><p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">{{ $environment->description }}</p></div>
+                                                <div class="min-w-0 flex-1 self-center"><h3 class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">{{ $environment->name }}</h3>@if (filled($environment->description))<p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">{{ $environment->description }}</p>@endif</div>
                                             </div>
                                         </a>
                                     @endforeach
diff --git a/resources/views/livewire/shared-variables/project/index.blade.php b/resources/views/livewire/shared-variables/project/index.blade.php
index d19fc39f5e..e1ac890a52 100644
--- a/resources/views/livewire/shared-variables/project/index.blade.php
+++ b/resources/views/livewire/shared-variables/project/index.blade.php
@@ -31,9 +31,11 @@
                                         <x-reicon name="projects" class="size-4" />
                                     @endif
                                 </div>
-                                <div class="min-w-0 flex-1">
+                                <div class="min-w-0 flex-1 self-center">
                                     <h2 class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">{{ $project->name }}</h2>
-                                    <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">{{ $project->description }}</p>
+                                    @if (filled($project->description))
+                                        <p class="mt-0.5 truncate text-[11px] text-neutral-500 dark:text-fg-faint">{{ $project->description }}</p>
+                                    @endif
                                 </div>
                             </div>
                             <div class="mt-auto pt-4 text-[11px] text-neutral-500 dark:text-fg-dim">