mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
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
This commit is contained in:
rosslh
Andras Bacsai
@@ -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 }}"
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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'] }}"
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user