rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): show resource domains in mobile resource list

Browse source
This commit is contained in:
Andras Bacsai 2026-08-12 23:54:40 +02:00
parent 2c6208c8ce
commit 1f550e8fcf
3 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/css/app.css
View file

@ -3630,6 +3630,10 @@ .environment-resource-grid {
column-gap: 1rem;
}
.environment-resource-grid .mobile-resource-domain {
display: none;
}
.projects-table-grid {
display: grid;
grid-template-columns:
@ -3743,10 +3747,14 @@ @media (max-width: 768px) {
column-gap: 0.75rem;
}
.environment-resource-grid > :nth-child(2),
.environment-resource-grid > :nth-child(5) {
.environment-resource-grid .resource-type,
.environment-resource-grid .resource-server {
display: none;
}
.environment-resource-grid .mobile-resource-domain {
display: block;
}
}
/* Command palette (global search) */

15
resources/views/livewire/project/resource/index.blade.php
View file

@ -171,10 +171,10 @@ class="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm d
<div
class="environment-resource-grid border-b border-neutral-200 bg-neutral-50 px-4 py-2.5 text-[11px] font-medium text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.025] dark:text-fg-faint">
<div>Resource</div>
<div>Type</div>
<div class="resource-type">Type</div>
<div>Status</div>
<div class="resource-domain">Domain</div>
<div>Server</div>
<div class="resource-server">Server</div>
<div class="resource-tags">Tags</div>
</div>
@ -210,10 +210,17 @@ class="shrink-0 rounded-md border border-neutral-200 bg-neutral-50 px-1.5 py-0.5
<p class="min-h-4 truncate text-[11px] text-neutral-500 dark:text-fg-faint">
<span x-show="item.description" x-text="item.description"></span>
</p>
<div class="mobile-resource-domain min-w-0">
<template x-if="item.fqdn">
<a :href="firstDomain(item.fqdn)" target="_blank" rel="noopener noreferrer"
class="relative z-10 block truncate text-[11px] text-neutral-500 hover:underline dark:text-fg-dim"
x-text="displayDomain(item.fqdn)"></a>
</template>
</div>
</div>
</div>
<div class="truncate text-[12px] text-neutral-600 dark:text-fg-dim"
<div class="resource-type truncate text-[12px] text-neutral-600 dark:text-fg-dim"
x-text="item.typeLabel"></div>
<div>
@ -233,7 +240,7 @@ class="relative inline-block max-w-full truncate align-middle text-[12px] text-n
<span x-show="!item.fqdn" class="text-[12px] text-neutral-400 dark:text-fg-faint">-</span>
</div>
<div class="truncate text-[12px] text-neutral-600 dark:text-fg-dim"
<div class="resource-server truncate text-[12px] text-neutral-600 dark:text-fg-dim"
x-text="item.destination?.server?.name || 'Unknown'"></div>
<div class="resource-tags flex min-w-0 items-center gap-1 overflow-hidden">

19
tests/Feature/ResourceIndexFiltersTest.php
View file

@ -17,3 +17,22 @@
->toContain('Clear filters')
->not->toContain("typeFilter: 'all'");
});
it('uses stable classes to hide resource table columns on mobile', function () {
$view = file_get_contents(resource_path('views/livewire/project/resource/index.blade.php'));
$css = file_get_contents(resource_path('css/app.css'));
expect($view)
->toContain('class="resource-type"')
->toContain('class="resource-server"')
->toContain('class="resource-type truncate')
->toContain('class="resource-server truncate')
->toContain('class="mobile-resource-domain min-w-0"');
expect($css)
->toContain('.environment-resource-grid .resource-type,')
->toContain('.environment-resource-grid .resource-server')
->toContain('.environment-resource-grid .mobile-resource-domain')
->not->toContain('.environment-resource-grid > :nth-child(2),')
->not->toContain('.environment-resource-grid > :nth-child(5)');
});