From 1f550e8fcf7fc120d639baefb71156adec20bdbe Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 12 Aug 2026 23:54:40 +0200
Subject: [PATCH] fix(ui): show resource domains in mobile resource list

---
 resources/css/app.css                         | 12 ++++++++++--
 .../livewire/project/resource/index.blade.php | 15 +++++++++++----
 tests/Feature/ResourceIndexFiltersTest.php    | 19 +++++++++++++++++++
 3 files changed, 40 insertions(+), 6 deletions(-)

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 @@ 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) */
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 @@
                 <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">
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 @@ 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)');
+});