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)'); +});