fix(ui): expose environment variable settings on mobile

Collapse environment variable rows to the key and settings action on small
screens, and let the key open the corresponding details modal.

resources/css/app.css

@@ -2026,6 +2026,31 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-template-columns: minmax(14rem, 2.5fr) 4.8rem 4rem 4.5rem 4.8rem 4.2rem 3rem;
 }
 
+@media (max-width: 768px) {
+    .environment-table-scroll .env-table-grid {
+        min-width: 0;
+    }
+
+    .data-table-header.env-table-grid {
+        display: none;
+    }
+
+    .data-table-row.env-table-grid {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+    }
+
+    .data-table-row.env-table-grid > :not(:first-child):not(:last-child) {
+        display: none;
+    }
+
+    .data-table-row.env-table-grid > :last-child {
+        display: block;
+        justify-self: end;
+    }
+}
+
 /* Shared variables only store value shape (multiline), not per-resource flags. */
 .env-table-grid-shared {
     grid-template-columns: minmax(0, 1.6fr) 6rem minmax(0, 1fr) 4.5rem 3rem;

resources/views/livewire/project/shared/environment-variable/show-hardcoded.blade.php

@@ -2,7 +2,12 @@
     x-show="typeof envFilter === 'undefined' || envFilter === 'all' || envFilter === '{{ $isPreview ? 'preview' : 'production' }}'">
     <div class="data-table-row env-table-grid {{ $showEnvironmentType ? '' : 'env-table-grid-no-type' }}">
         <div class="flex min-w-0 items-center gap-2">
-            <span class="env-key-label min-w-0 truncate font-mono text-[13px] text-black dark:text-fg" title="{{ $key }}">{{ $key }}</span>
+            <button type="button" data-env-name-trigger
+                class="env-key-label min-w-0 truncate text-left font-mono text-[13px] text-black dark:text-fg"
+                title="{{ $key }}"
+                @click="$el.closest('.data-table-row').querySelector('[data-env-settings-trigger]').click()">
+                {{ $key }}
+            </button>
             @if (filled($comment))
                 <x-helper :helper="e($comment)" />
             @endif
@@ -26,7 +31,7 @@
         <div class="justify-self-end">
             <x-modal-input title="Environment variable details" :closeOutside="false">
                 <x-slot:content>
-                    <button type="button" class="icon-button shrink-0"
+                    <button type="button" data-env-settings-trigger class="icon-button shrink-0"
                         title="View environment variable" aria-label="View environment variable">
                         <x-reicon name="settings" class="size-3.5" />
                     </button>

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -24,8 +24,12 @@
                     </g>
                 </svg>
             @endif
-            <span class="env-key-label min-w-0 truncate font-mono text-[13px] text-black dark:text-fg"
-                title="{{ $env->key }}">{{ $env->key }}</span>
+            <button type="button" data-env-name-trigger
+                class="env-key-label min-w-0 truncate text-left font-mono text-[13px] text-black dark:text-fg"
+                title="{{ $env->key }}"
+                @click="$el.closest('.data-table-row').querySelector('[data-env-settings-trigger]').click()">
+                {{ $env->key }}
+            </button>
             @if (! $isSharedVariable && filled($comment))
                 <x-helper :helper="e($comment)" />
             @endif
@@ -84,7 +88,7 @@
             <x-modal-input title="Edit environment variable" :closeOutside="false" :wireIgnore="false"
                 wireOpen="editorOpen">
                 <x-slot:content>
-                    <button type="button" wire:click="loadValues" class="icon-button shrink-0"
+                    <button type="button" wire:click="loadValues" data-env-settings-trigger class="icon-button shrink-0"
                         title="Edit environment variable" aria-label="Edit environment variable">
                         <x-reicon name="settings" class="size-3.5" />
                     </button>

tests/Feature/EnvironmentVariableTableLayoutTest.php

@@ -80,16 +80,25 @@ test('resource environment variables table has a Managed column and no name-cell
     expect($show)->toContain('<x-helper :helper="e($comment)" />');
 });
 
-test('resource environment variables table remains horizontally scrollable on mobile', function () {
+test('resource environment variables expose their settings action without horizontal scrolling on mobile', function () {
     $view = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/all.blade.php'));
+    $show = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/show.blade.php'));
+    $hardcoded = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/show-hardcoded.blade.php'));
     $css = file_get_contents(resource_path('css/app.css'));
 
     expect($view)
         ->toContain('environment-table-scroll')
+        ->and($show)
+        ->toContain('data-env-name-trigger')
+        ->toContain('data-env-settings-trigger')
+        ->and($hardcoded)
+        ->toContain('data-env-name-trigger')
+        ->toContain('data-env-settings-trigger')
         ->and($css)
         ->toContain(".environment-table-scroll {\n    overflow-x: auto;")
         ->toContain(".environment-table-scroll .env-table-grid {\n    min-width: 53rem;")
-        ->not->toContain('.data-table-row.env-table-grid > :nth-child')
+        ->toContain('.data-table-header.env-table-grid')
+        ->toContain('.data-table-row.env-table-grid > :last-child')
         ->not->toContain(".env-type-desktop {\n        display: none");
 });