diff --git a/resources/css/app.css b/resources/css/app.css
index 9dd88d1dd..eba9429ea 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -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) */
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index ea820b01a..5c3e98045 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -171,10 +171,10 @@ class="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm d
Resource
-
Type
+
Type
Status
Domain
-
Server
+
Server
Tags
@@ -210,10 +210,17 @@ class="shrink-0 rounded-md border border-neutral-200 bg-neutral-50 px-1.5 py-0.5
+
-
@@ -233,7 +240,7 @@ class="relative inline-block max-w-full truncate align-middle text-[12px] text-n
-
-
diff --git a/tests/Feature/ResourceIndexFiltersTest.php b/tests/Feature/ResourceIndexFiltersTest.php
index e1ae4d23b..de6375465 100644
--- a/tests/Feature/ResourceIndexFiltersTest.php
+++ b/tests/Feature/ResourceIndexFiltersTest.php
@@ -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)');
+});