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

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
+10 -2
View File
@@ -3630,6 +3630,10 @@ html[data-theme="custom"] .logs-viewer-timestamp {
column-gap: 1rem;
}
.environment-resource-grid .mobile-resource-domain {
display: none;
}
.projects-table-grid {
display: grid;
grid-template-columns:
@@ -3743,10 +3747,14 @@ html[data-theme="custom"] .logs-viewer-timestamp {
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) */
@@ -171,10 +171,10 @@
<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 @@
<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 @@
<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">
@@ -17,3 +17,22 @@ it('provides dynamic multi-select resource filters', function () {
->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)');
});